Cuando muevo un accesorio calculado de mi componente a la tienda, tengo que usar .value en la directiva v-model.

Las dos listas de selección de cuásar a continuación están funcionando. Ambos muestran el estado de la tienda, el primero accede al estado desde una propiedad calculada en la tienda y el segundo accede al estado desde una propiedad calculada en el componente.

Ambos accesorios computados son esencialmente la misma implementación, ¿por qué tengo que usar .value en la directiva v-model de la primera?

 <q-select outlined v-model="store.warehouse.currentDepotCode.value" :options="store.warehouse.getDepotSelectList()" emit-value map-options label="Select a Depot" class="q-ma-md" /> <q-select outlined v-model="currentDepotCode" :options="store.warehouse.getDepotSelectList()" emit-value map-options label="Select a Depot" class="q-ma-md" /> setup() { const store = inject("store"); const currentDepotCode = computed({ get(){ return store.warehouse.state.currentDepot; }, set(depotCode){ store.warehouse.setCurrentDepot(depotCode); } }); return { store, currentDepotCode, };

tienda/index.js

 const state = reactive({ depots, currentDepot: 'VIC', }); const currentDepotCode = computed({ get(){ return state.currentDepot; }, set(depotCode){ state.currentDepot = depotCode; } }); export default { state: readonly(state), ...methods, ...getters, currentDepotCode, };

(Estoy usando un accesorio calculado porque el componente de selección aparecerá en varias páginas, así que quiero usar una función de establecimiento y no quiero repetir el accesorio calculado en cada página, por lo que va a la tienda. Feliz de tener comentarios en esta configuración también).