vuejs
Two-way binding not working when using reactive, must use Ref
Vue version
3.4.21
Link to minimal reproduction
https://play.vuejs.org/#eNp9UltPwjAU/itNX9QEIV6eyCABwoM+KBHfrDF1O2Cxa5teJsmy/+5pB0MS4W39bj3nW2s6MaZfBaBDmrncCuOJAx/MmClRGm09qYkFnntRQQ+/VqQhK6tLcoGmC6aYyrVy0SQh91CQUSe/fHu/YiobtLEYiAcPpZHcA54IyZzhakyWO+uQ1PUhp2nQGfnoi9pEkOq61AXIEaN7JaOkDNILIwFRbwMwmuLRpI0XWpFCOP4pMbTiMkQVKhYSuIPdfUQryAat+tg7npzApyfw2RGOO6QL8JANuuVpj3qHva3Eur9xWmH5dVQzmuvSCAn2OUU4RrGUNp9RLqX+eUxY3LK3x/MvyL//wTduGzFGFxYc2Ap76TjP7Rp8S8+XT7DF747EhoNE9RnyBZyWIc7YyqZBFTj2H12a9iE9IaHWr26+9aDcfqn0m1DZJD2j+JhmZ1Y/jHvXv08+phps8aMCGzOxQCT6tze0+QX3+PGQ
Steps to reproduce
What is expected?
I expect the same outcome regardless of how the reactivity is defined. Should be specified in the docs if this is how it's actually intended, would save hours of debugging.
What is actually happening?
2 way binding not working
System Info
No response
Any additional comments?
No response
const selected = defineModel({default: []});
Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:
const selected = defineModel({default: []});
Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:
That has nothing to do with this issue.
const selected = defineModel({default: []});
Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:
That has nothing to do with this issue.
select same as checkbox
On my side, the template was compiled to this, and $setup was processed by shallowUnwrapHandlers, it won't be collected when it's property was access, and it seems this behavior starts in very early version, don't know if it's a bug.
I'd argue that this is expected behaviour. It's just not made explicit enough in the docs.
Just to add clarification on the issue, docs should be updated to explain how v-model emits a new array (as opposed to updating an existing one) when working with <select multiple> and <input type="checkbox" multiple />.
