@update:model-value isn't switching options in q-option-group (Vue3/Quasar)

Question

I'm new in Quasar Framework and Vue.js. I wanted to use q-option-group for my simple application. However, model-value and @update:model-value didn't switch option from one to another. I know, I can use v-model but I can also use model-value instead of it by the quasar documentation.

I just wonder how it is used.

HTML

<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-lg">
    <q-option-group
      :model-value="selected_fruit"
      :options="fruits"
      color="dark"
      @update:model-value="value => { selected_fruit = value }"
    ></q-option-group>
  </div>
</div>

VUE

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    return {
      selected_fruit: 'apple',
      fruits: [
        {
          label: 'Apple',
          value: 'apple'
        },
        {
          label: 'Banana',
          value: 'banana'
        },
        {
          label: 'Pear',
          value: 'pear'
        }
      ]
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

Thank you for answers

Answer 1

You need to make it reactive with ref or reactive :

const { ref } = Vue

const app = Vue.createApp({
  setup () {
    const fruits = ref([{label: 'Apple', value: 'apple'}, {label: 'Banana', value: 'banana'}, {label: 'Pear', value: 'pear'}])
    const selected_fruit = ref('apple')
    return { selected_fruit, fruits}
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
<div id="q-app" style="min-height: 100vh;">
  <div class="q-pa-lg">
    <q-option-group
      :model-value="selected_fruit"
      :options="fruits"
      color="dark"
      @update:model-value="value => { selected_fruit = value }"
    ></q-option-group>
    {{ selected_fruit }}
  </div>
</div>