Two-way binding not working when using reactive, must use Ref

[collmomo]

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

link to playground

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

[unbrain]

const selected = defineModel({default: []});

Starting in Vue 3.4, the recommended approach to achieve this is using the defineModel() macro:

[LinusBorg]

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.

[unbrain]

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

[edison1105]

This is because reactive data reassignment loses the reactive.

[Doctor-wu]

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.

[LinusBorg]

I'd argue that this is expected behaviour. It's just not made explicit enough in the docs.

[bencodezen]

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 />.