defineModel value de-synchronizes between parent and child if @update handler is not provided
Vue version
3.4.15
Link to minimal reproduction
Steps to reproduce
Provide a prop value but no @update handler for a v-model prop on a child component using defineModel.
To reproduce in the example, click the middle "Toggle Child" button.
What is expected?
Props are not typically considered writable, and defineModel emulates a prop/$emit pair, so writes to the value should not have a (direct) effect. Since the parent component has provided a value, that value is the one that should be used.
This demonstrates what I think is the expected behavior, since this is how v-models are documented to work under the hood.
Omitting the update event handler should tell the child component that the parent does not care if the child wants to update the value, and the event/update should be ignored.
What is actually happening?
After initialization, the value behaves like a local ref, and ignores the value provided by the parent, unless it changes.
System Info
System:
OS: Linux 6.6 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
Memory: 2.11 GB / 30.98 GB
Container: Yes
Shell: 5.2.26 - /bin/bash
Binaries:
Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
Yarn: 4.1.0 - /usr/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
pnpm: 8.6.0 - /usr/bin/pnpm
npmPackages:
vue: ^3.4.15 => 3.4.15
### Any additional comments?
_No response_
Some context here https://github.com/vuejs/rfcs/discussions/503#discussioncomment-7828483
This is actually designed this way, but missing in the docs. We'll make sure to amend the docs accordingly. I'll leave this open until we have done that.