Inconsistent update timing behavior when using defineModel

[RylanBueckert-Broadsign]

Vue version

3.5.17

Link to minimal reproduction

https://play.vuejs.org/#eNqdU9tu2zAM/RVBL0mBxkabDQMyJ+g29GEDdsHWRwGDa9OeWlk2dHEDeP73kVLiZukFRV8MiufQPKSOBv6h65LeA1/xzBZGdo5ZcL5jKtf1WnBnBd8ILZuuNY4NzEDFRlaZtmEzLJtN0BVY96nFWIN2O0KS/pelPlggdNFq61hj6zO2pj/OZ60qZyfvD5DzJ5HlMZKlUTjKxIODplO5AzwxlpWyDwGGDqUsiklhus9fm/v4iLNq2hLUos+VB9wFCRb8RZX9IpTGonPBX9dtid0ufFfiOEfg/IStN2wYJzlZGkfN0oMF8FO8P1xcJevkxrYaL3kgsuDUVSow3zsncbGCr1hACMuVau++hJwzHk73+eIPFLeP5G/slnKC/zBgwfQg+IS53NTgInz56xtsMZ5AHMkrZD8D/gTbKk8aI+2j1yXKPuAFtZ+DB6Wur+zl1oG2+6FIKDHHwBccHUh2fGr0e7nL5E2oE3rELT6w8WufC9p1sjJdKHq5hEpq+EqnzDqDQ2zmZOs9D5fqlYum3xHYX6a9Ups5fSO38rqgeRiZCt0RRgotkuAZrJ9puCMBbPfLCTigIYwjP/eirr1z2OaiULK4pYmxH85MG8rSCEai7XKN70BWSIoNkTYMMRxH7IGERxz7uwdD94crXiZvk7N3fPwHQ+GPgQ==

Steps to reproduce

1. Create a component that uses defineModel to set up 2 way binding
2. Within that component, alter the model and then read its value after within the same tick on some action (onBeforeMount, on a button click, etc.)
3. Import and use the component both with the 2-way binding connected and without it fully connected
4. Observe the value read from the model is sometimes the pre-update value, and in other cases is the post-update value

What is expected?

The model is updated with consistent timing regardless if props are provided or events handlers are provided. I think ideally the model would be updated within the same tick so that reading from it afterwards is intuitive.
Ex:

const model = defineModel<string>()

...

model.value = 'hello world';
console.log(model.value); // I would expect that this would always print 'hello world' regardless of how it is connected to the parent component

If this behavior is not possible, then it would also be acceptable if the model was always updated in the next tick. At least that would make it consistent.

What is actually happening?

The component's behavior is different depending on if how it is connected in the parent.

If both the prop and update events are hooked up (manually or with v-model), then the model does not update to the new value until after a tick has passed, and reading it immediately will result in the old value being read. This happens even if the onUpdate:modelValue handler does not update the modelValue.

If either or both the prop or event are not hooked up, then the model updates immediately to the new value within the same tick, and can be read right away.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.56 GB / 31.73 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.4.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.80)
    Internet Explorer: 11.0.26100.1882

Any additional comments?

No response

[jacekkarczmarczyk]

There are already lot if similar issues https://github.com/vuejs/core/issues?q=is%3Aissue%20state%3Aclosed%20defineModel%20nextTick

[RylanBueckert-Broadsign]

There are already lot if similar issues https://github.com/vuejs/core/issues?q=is%3Aissue%20state%3Aclosed%20defineModel%20nextTick

I can see they are related, but the main issue I want to bring up is that the behavior is not consistent all the time. If it is intended that the model does not update until the next tick, then IMO it is a bug that in some cases it updates immediately in the same tick.

[absidue]

As discussed in other issues it is working as expected. The correct way to use defineModel is with the two way binding hooked up, which when it updates on the next tick (emit is synchronous, props get updated on the next render/tick). So that the model is not completely useless when you fail to hook up the two-way binding, Vue internally creates a ref and uses that as the backing for the model, so it becomes fully synchronous.

So this issue isn't a bug report, it is a feature request for Vue to add artificial delays to the fallback.

[edison1105]

duplicate of #11832