Input with v-model sometimes shows wrong value

[Doeke]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNVMFy2jAQ/ZWtLzYzxDRpT4zDBDp0pj20naa3OAfHLI4TWXKlNZAy/HtXkjEeoExPIL2nfU+7T94G07qOVw0G4yAxuS5rAoPU1CAyWdymAZk0mKSyrGqlCe6RqJSFgaVWFYTxaL9hS4QdbQslYTWFXcfLlSTcEFOSkZfhorxgWi0yQl4BJF358Su+sbirkgYwYjgZ9bjBkI1xzWVZxC9GSXa/tRXSIFdVXQrU32sqlWTzY3CIxTIh1Pqr2yPd4HC/nz9j/npm/8Vs7F4a/NBoUK8wDTqMMl0geXh+/43v1gMrtWgEsy+AP9Eo0ViPnjZr5IJt93jO7RfXUO7JLzPfEEqzv5Q1apk7x08D7v+nC1c/2P0Qf3TnUrnjLvbn938R2ILG5RDWGeXP8+USc+rGfC4DQ/czOxuFVPJ/Q45h4BYews9KhUMIZ5n2P3/Cxz0pb7RGSUxj/SgMB/Z8z0UUDeB2AlHLi1eZaJDZTt6vBnzmzIkeo+VPD/xLcX1qiJSE1dVS6TatUEp/HU5tL8S8ustFmb/uQ90KucbaCW19u2DHc+HKI1/aifKynjC+7VqwY1oyqr2JepLkaoGTsbPM9VtWGiTcagYgKWXdEJwS+F2dlFldcT5RXKhzhtEVOn6k7axjMhyufoCOMpNK3DjwEIhZf9InqG1gh7KQ/YoRmmOlSjWuX17rjsXYoKErfnjC9LPKApyIIVj04I2VjA1qS2ORLsXtZ9N5t6wobPsC5lmtDay1kgW4lnOUM/Mmc/B5c2/S32Sts7pGzXdxRiMuytfZo08k7atoSfGylIupEFHos2EvDpCts9IzH94/votJl0WBOgpd2E4o1/+gtH214z2r6JAT6rUNsTtjtY/AmwPIqhb0LY780RgFVt0zHcSk5r+bTHj05gjlT5Wd8u4vVnpEoA==

Steps to reproduce

After clicking a button to change the current value, the first input (with :value="current") shows the correct value, but the second input (with v-model="current") shows the previous value instead.

What is expected?

Both v-model and :value should display the current value at all times

What is actually happening?

Inputs with v-model sometimes have a value that does not match the ref bound to it

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 13.86 GB / 30.66 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.139
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

Best I can tell this bug only happens in very specific situations where there is a :key on the component containing the inputs and watchEffect happening in a certain order

[edison1105]

use flush:post or flush:sync

watchEffect(() => (current.value = itemB.value),{flush:'post'})
watchEffect(() => (itemB.value = itemA.value),{flush:'post'})

see Playground

[linzhe141]

It is similar to this issue
#12460