A defineModel property's value cannot be read correctly after modification until nextTick

[troppoli]

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNqVU22L2kAQ/itLKGwEG6EtFGyUXo/7cAf3wt3RL0ZqLhl1dbMJ+xItIf+9s7sa054I/aSZeWZnnpnnaYKrqopqA8E4iFUmWaWJAm0qwlOxmiSBVkkwTQQrqlJq0hAJyyFR65Tzcvds/2dlURkNOWnJUpYFofgY7Qqu14znh0Q0cl+2G/2WiKwUShOmoVBXmTYpJ5Pew+GMMsE0SzmdDzr0sdk9KJWuACuOkTAcTKaLp1SCsAxAjcmH5u7l8SFSWjKxYsvfYa9XVKfcwKBdDBIRjzxxpIkfiKl4qgG/CIlzVk+b5l3fto1HNuUwb/LvX8+5/liUOfCxa4qL7DXHjcZ+F1gQj3odgyEuHKku2SraqFLgVRr7ZhLYCRgH+VhphqtIgjFxGZtzO7tzMS0NDI/xbA3Z9kx8o/Y2lgRPEhTIGpKgy+lUrkD79M3LA+zxf5dERoYj+kLyGVTJjZ3Rw34YkePYPZyb9tbJA+/yqm72GoQ6krKDWmTr8EmAYrm+QP007ufoi6tLRItb7JT2H7r+R8E9faLOclgyAff2pLFX1Gw+DalL02GD6dRwPZ7NW1SULy06keLjIc04y7ZEr4G8Ga1LQTtgXt7qidWvo+VjAnY/nSVmNLNc6JC+8VJu6RzNQPxYXsSI8WAbP/TsMouNwceQeUfknSt88aC1Yx1QO8ax9eQMuNcXK4zQjGP3vX5Fbgtc/WU3eeLku1sFHsESxzMovCJ6e42XAX8CRzkeefzJif7q6MeF99gln6O30aau9GTVamqrj4exLq7OWPBXDdIKErWDqoo+fQ3aP2JYxOw=

Steps to reproduce

open the playground and click the button, in the child component's doIt, the prop defined with defineModel 'items' is modified and then read. The results are presented in a DIV.

What is expected?

The property should work, read write read in the component and emit at nextTick

const newVal = ['child','blork'];
items.value = newVal;

expect(items.value).toequal(newVal);

What is actually happening?

items.value remains the value it was before the assignment until nextTick. This makes the property not reliable/useful except in trivial cases.

System Info

Chrome Version 125.0.6422.142 Win10

Any additional comments?

No response

[LinusBorg]

This is expected behavior. defineModel() is a shortcut for receiving a model prop emitting an update event to the parent with the new value.

That new value will only be available after the parent has updated (on the next tick) and sent the new value back down to the child that emitted it. That's the same behaviour you would see when doing a manual emit('update:items', 'someNewValue')

[troppoli]

I guess the wrinkle here is that you can't get into this situation with the long hand because props are readlonly. That means you can't even start heading down this path. I'm going to steer clear of defineModel because it looks like a variable but acts like a const asyncly updated variable.

I'm relatively new to vue, this has been the first real stumble for me.