Model ref values are not proxies

[nestorrente]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqdVMlu2zAQ/ZUBL4kBQ0bg9uLKchfkkAJuA3c5CSgUeeQooUiCpFwbgv69Q9IL29pGm5tmeY9vhk/s2DulknWLbMJSU+paWTBoWwW8EKtpzqzJWZaLulFSW+hAYzWE2txrudlCD5WWDVwR/upNLnJhtwphvv1e8BZhCl0ugBCFMfVK4HI2gQcpORaCmgGa1hb2j2zvaUopjIVmu8CKWOjIdMeZXXf94LeWuVwip6YlVrVAH0XN7hiqFC23E7gewDQDx0DnBJaqFaWtpTiIpBOpzeP88cl6P0o0xwSspqTT2p9k8TKOPD78P6awm9Nqkt3iiMuhz2DPaziDT0fh/um2KbDYKE5dFAGkjzeZu/EazSwdUeCTKrsz7nIgTFaAcqaYQdftDXLtVQ+g79ORikCNv7RLMC/3CNyLcIbwsEiFxoygwSy+nxJHRPDHOUyo/o36ppY0ezxq+tBaS8t1DqffIkQ5g7clr8tnykQOoj9msYu8eUehO4uW8M90XmFM6Hf3IsqDp4hu7r9frC6y2JHslLJ0FBmJDek5oR+3qlfJk5GC3hzvzpyVslE1R/1ZOQfTkzMJvnW1gnP586PPObsO9/nyEcvnE/kns3G5nN1rNKjXmLNDzRZ6hTaUb798wg19H4qkv+XUfaG4QCN56zSGtvetWJLsqM+rvfOvZS1WX83txqIw+6GcUNfZ+/6c0cP54cLoR7nj5JXH0b9KW/yxRu04aYHj5HVyM2b9L6vH/RY=

Steps to reproduce

When accessing the reproduction link, you'll notice it says Is model value a proxy? false. Because of that, if you click the Mutate model button, it won't trigger a re-render.

What is expected?

Model values should be wrapped with a proxy, so they are reactive, just as any other ref.

What is actually happening?

Model value is not a proxy, and thus, the reactivity system doesn't detect mutations made to that object.

System Info

Google Chrome	134.0.6998.166 (Official Build) (arm64) 
Revision	0b26d3a1ee1e44572492002c2e52ffcd13ac701b-refs/branch-heads/6998@{#2123}
OS	macOS Version 15.3.2 (Build 24D81)
JavaScript	V8 13.4.114.21
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Any additional comments?

No response

[GeoffreyParrier]

There are some discussions around object as v-model and for now:

• It seems, looking at multiple comments, it's a bad practice https://github.com/orgs/vuejs/discussions/10538#discussioncomment-10830197
• An attempt has been made and it seems to lose reactivity cf Proposal: propsToModels() rfcs#725
• You can use vueuse/usevmodel and vueuse/usevmodels to do exactly that

Related:
https://github.com/orgs/vuejs/discussions/10538
vuejs/rfcs#725

[LinusBorg]

Its not reactive because you assinged a plain, nonreactive object as the default value

In Composition API, We make objects reactive explicitly with reactive(), so use that if you with for the default value to be a reactive object.