Subscribe on changes!

Default value of defineModel is not handled as a local ref

avatar
Jan 30th 2024

Vue version

3.4.15

Link to minimal reproduction

https://play.vuejs.org/#eNrVVVtv0zAU/itWXrpJbaIxxkPIpgEaaCBatE3igfAQktPOw3aM7WSdovx3jp20TdOLCgIk+hIfn9t3Lp9bea+k9MsCvNCLdKqoNESDKeRFLCiXuTLkba74DUzJVOWcDPygla3TYM3oY54B61suLneaJ6mhJWzzaTStYxQ06BAXCga4ZIkBlAiJWkTBSlpC2bxrotr7KOiEQVGbJ2aP/hStSRWLjGpUP4VkymD+Mhb2M8qoAgyRi5CkOSu4QMUskSE5eSGtEU/UjKLy2Zmcx6J2yNvA3tBr6h/xRPoPOhfYdcxDSNwqdOyFNjPBX+xh5VaOvXtjpA6DIM0EumEZtFS+ABMIyYNLNAtUIQzlMMpyfnnqP/dPzgJEb7r3Pmg++qbyRw0Ko8TesJMnwMsS1EiByECBOjRvz20td0+3kd+mx/7U2Baj01xM6azXlDTnkjJQE2kbvt6chLH88b27M6qAZTHpPaTft9w/6HlT1CcFDlmnAQZnBqZRX92OYY7npZLnWcHaQexQ3oDGVbAYG7PXhcgQdsfOob12M6Zidqev5gaEXhRlgbpuOHs3kDd7Sl/BPfVPO13s8203pyuikBx1yzrLMNzcVnctZGGWfHRSy8FY4JQ06iw/zkkGUyrAJTyqFPwokBkZkiVhGoZWmxTMhDbTUSUSDiEZDIZEF2oh1Mf1sWPeLm5HGS1JyhKtz2PPZo09x2dCjsaTO/J5cvPhevyOTMZXx+5JIY/U3HdxkURkCySk0Nh6C6cJUVU2Yo29s1KkZSIuxoiMRE0HyhEOF1ib+cvAoh58jb3gAvFa467jbVPVLt+26A33CJlSbj5FOMtl37cMsZmCy9AbA7Zz30NJe+Dc10LqIVjfpdU7vH+h2pf8X21Vk+5Pr9bha9Tktz7dTfqVPcLxrzZhbY0O2qM1952L1Pm7/svvwT6i/ybNV9MQeErY/8He+ieWfDiw

Steps to reproduce

Just start typing in one text input to update the relative object

What is expected?

The default value passed inside defineModel should be handled as a top level property and unwrapped correctly inside the template.

What is actually happening?

The ref is not unwrapped so it is not updated

System Info

No response

Any additional comments?

VSCode tooltip on defineModel report this: " ...The the returned ref behaves differently depending on whether the parent provided the corresponding v-model props or not:

If yes, the returned ref's value will always be in sync with the parent prop. If not, the returned ref will behave like a normal local ref. "

So if no value is provided it should behave like a normal local ref

avatar
Jan 30th 2024

you should not define the default value as a ref. It's just a prop default value, and those are never unwrapped (in the child) either - unwrapping happens in the parent template.

So using reactive() is the way to go here.