defineModel on Firefox does not work as expected

[JustSxm]

Vue version

3.5.17

Link to minimal reproduction

https://play.vuejs.org/#eNqFUslOwzAQ/RXLlxSppAc4lRaxqIcisQgQJ1+idBJcnLHlJVSq8u+MnbYUynKy573xm+eZWfNLY/I2AB/ziSutNJ458MEwVWA9Fdw7wc8FysZo69maWag6VlndsIxeZTvmWjdmg+ejGETR7EygwFKj86xodEDPplFhkGVHAiejviDJU+ChMarwQBFjkyTXHjd6AYpc9I8FHxE7Ge2l8iE5pAKVrPOl00jfWEcBwUtSkArsvfGSDAg+ZomJXKGUfr9JmLcBhlu8fIXy7Qd86VYRE/zBggPbguA7zhe2BrIW6dnTHazoviPJf1CU/Qf5CE6rED32aVcBF2R7Ly+5nac2S6yf3WzlAd32U9FozOxSvuDU9ti8377+afckP03vBHbUxe3I/tmDfpZpLDTKBVQS4TZGAxqowCpgGWsyjXM0wQ+gBfRjNovHUe9CQRKQlYTFS6ECkFBW0CaxXjdvN+CXJHL5bWMOdkbGintLk07B2UUiCNiYIuhwj7oPe2AHrg

Steps to reproduce

1. Use firefox
2. Enter anything in the field. It should be blocked and only show "a", but it wont on firefox.

What is expected?

It should only keep "a" and nothing else should "make it through"

What is actually happening?

Seems like either a race condition or firefox not updating at the same time as Chrome? no clue.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (20) x64 Intel(R) Core(TM) i5-14600K
    Memory: 12.60 GB / 31.77 GB
  Binaries:
    Node: 22.16.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (134.0.3124.85)
    Internet Explorer: 11.0.26100.1882

-- Its not showing my actual browser: Firefox 139.0.4

Any additional comments?

No response

[JustSxm]

function onInput(event: Event) {
  let modifiedValue = 'a'
   model.value = modifiedValue
  event.target.value = modifiedValue
}

Solves my issue

[edison1105]

• MDN Playground

There is a difference in the Playground

• In Chrome, the console log outputs changed1, changed2
• In Firefox, the console log outputs changed2, changed1

When handling event listeners and microtasks, Chrome clears the microtask queue immediately after each event listener finishes. it executes microtasks between event listeners. However, Firefox clears the microtasks queue only after all event listeners have finished.

This inconsistency leads to this unexpected behavior. the Comp.vue is not updated in Firefox because props have not changed after all event listeners have finished.

[FragsterAt]

function onInput(event: Event) {
  let modifiedValue = 'a'
   model.value = modifiedValue
  event.target.value = modifiedValue
}

Solves my issue

you can wait for nextTick() - IMHO this is more reliable way to do this. Something like

async function onInput(event: Event) {
  let modifiedValue = 'a'
  await nextTick()
  model.value = modifiedValue
}

[F0rsaken]

I had the same problem when using it a a component v-model only (without input) on Firefox

const model = defineModel()

function onClick() {
  model.value = 'new_value'
  console.log(model.value) // logs old value
}

waiting for nextTick solves the issue