Subscribe on changes!

toRef strange behaviour with props and v-model

avatar
Jan 12th 2022

Version

3.2.26

Reproduction link

codesandbox.io

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.

avatar
Jan 12th 2022

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.