vue/nuxt3 weird ref prop behaviour

[Ischafak]

Vue version

3

Link to minimal reproduction

https://codesandbox.io/p/devbox/dazzling-lake-wsdcds?file=%2Fpages%2Findex.vue%3A3%2C8

Steps to reproduce

just click the button and check the console

What is expected?

i should see the new value (in my scenario 2)

What is actually happening?

i am changing the id inside data object and calling a function inside of the component but i see the old value inside function

System Info

Macos opera

Any additional comments?

No response

[yyx990803]

This is expected behavior. Vue props are not synced to children immediately - they are only updated when the current component renders (i.e. after await nextTick()).

example

In general, you should avoid accessing / relying on child component state from a parent as much as you can.