I have a table of data where each row contains a select. As a baseline, this works like I expect:

<template>
  <tr>
    <td class="row">
      <q-select v-model="row.OpDef_Id" :options="choices" />
    </td>
  </tr>
</template>

<script>
export default {
  name: 'status-post-ops-row',
  props: {
    row: {required: true, type: Object},
    choices: {required: true, type: Array}
  }
}
</script>

But this does not:

<template>
  <tr>
    <td class="row">
      <q-select v-model="proxy" :options="choices" />
    </td>
  </tr>
</template>

<script>
export default {
  name: 'status-post-ops-row',
  props: {
    row: {required: true, type: Object},
    choices: {required: true, type: Array}
  },
  computed: {
    proxy: {
      get () {
        return this.row.OpDef_Id
      },
      set (v) {
        this.row.OpDef_Id = v
      }
    }
  }
}
</script>

Now there are other ways to accomplish my goal and they might be better. But I’m wondering if the above should work and the failure is a bug, or if it’s not expected to work (and why)?

What happens in the second example is that proxy's set method is called and the data updated, but get is not called and the display of the q-select does not update. Any reload causes the display to update with the correct label–confirming that set did the correct thing.

In the first example, if I look at events, q-select emits an input then the popover emits a hide. In the second, that also happens, then q-select additionally emits a change. Both input events and the change event have the value of the choice.

I’ve tried adding emit of input, change, and even both to the set but that made no difference.