значение тега select не отражает изменения в v-модели

Question

v-модель в теге не отражает никаких изменений в шаблоне блейда.

Я пробовал это с пустым html-файлом, но он работает, но проблема возникла только в блейд-шаблоне

// клинок

<div id="fruit-container">
<select  v-model="fruit">
    <option disabled value="">Choose a fruit</option> 
    <option>Apple</option>
    <option>Banana</option>
    <option>Strawberry</option>
   </select>
 <span>Fruit chosen: @{{fruit}}</span>
</div>

// js

new Vue({
 el:'#fruit-container',
 data:{fruit:""}
})

значение @{{fruit}} никогда не появляется, когда я выбираю другую опцию, и это только не работает в блейде. Мне интересно, что я тут не так сделал?

Answer 1

Я думаю, вам нужно изменить data на это:

data() {
  return { fruit: '' }
}