toRef strange behaviour with props and v-model
Version
3.2.26
Reproduction link
Steps to reproduce
Pass a value obtained by a toRef(props, 'someProps') to a component's v-model . The value will not change (even if the sub compents emits an update:modelValue even) because it's treated as readonly
What is expected?
The list value must change
What is actually happening?
The list is unchanged. In the console a WARNING is thrown: Set operation on key "list" failed: target is readonly.
This works as intended. Use a computed with a getter and setter to wrap a prop for v-model.
Wrote about it here: https://www.vuemastery.com/blog/vue-3-data-down-events-up/
VueUse also provides a composable to do this.