Variable changes are not reflected in v-model in certain case

[laineus]

Vue version

v3.5.13

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNqNVF1vmzAU/StX1iRAYiRb+4SSSl3Xh01aV23ZXkqkIrgJ7sBGtqGpIv77LnZgBHXTnhKfe8/xuR/myK7rOmobZDFb6Uzx2oBG09RQpmK/TpjRCbtKBK9qqQwcof0icyw3eDAhKNyFkOOOC7zWLyK7kZQlUFDIoROgCOGZm+IjV5gZ3qKGDnZKVuDR5V4iEpFJoQ3cSVWl5UiE9VzKPyYCnMcY/ADWV2ARACdQ6T2RyJrveYELEBS1adkgBbybggrD/J29s4/ekwuuMVKoZdmiH0SmQOGfSb+u8d6DxQKENP11JdWFOeykgvZt1TfJUTsy4f6R5w2vUDbmf8QvyKDlh3C5XC5HFUWVK3GqvPC9nLdeCA+D1Ig8kmgMb46jdvcYhEPW+Sh8InFRN4ZooycAT4ofdZ4ajG05P3sRj3pOajGk4sU6mFqn3/GGLpiYAniY7s3I2Y7p28Hb1s6so5NrnBvq+XqNS3EOn7o6n+dsowKSXS3cqtNi08FgVZdUJp0AVrOrFg6dr2UPrxYTJgvpqZDZHd9HT1oKek+2lQnLiMRLVF9rw6mYhMVDkxOWlqV8/mwxoxo89YA4BWa/XsGf9KHHEnZP1aFqMWFjzKRqj8aFb7/fUacnQZpgU1L2P4Lf+n41vUeX9qEROdme5Fm3n+yXgIv9Rt8eDAo9FNUbHWbXZ9O77vv1t9L/2L2ILi2PRs66317lem4=

Steps to reproduce

1. Change value of v-model in Promise.resolve().then in setup.

<script>
setup () {
  const variable = ref('oldValue')
  Promise.resolve().then(() => {
    variable.value = 'newValue'
  })
}
</script>

<input v-model="variable">

2. Use it as a async component

const AsyncComponent = defineAsyncComponent(() => Promise.resolve(NormalComponent))

What is expected?

the <input> will be changed to 'newValue'

What is actually happening?

then, the newValue does not reflect for the <input>. it still shows oldValue.

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 5.39 GB / 15.27 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 6.15.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.85

Any additional comments?

This issue was reported as a Vue bug based on an investigation by members of the Nuxt community.

ref: nuxt/nuxt#30590

[edison1105]

a workaround

Promise.resolve().then(() => {
  nextTick(() => {
    msg.value = 'Changed2';
  })
});

see Playground

[edison1105]

The underlying problem is the same as #12460
The mounted is called after beforeUpdate of vModelText