Two-way `<input v-model>` binding loses downstream sync in child component about core HOT 3 CLOSED

If you want to access the owner component's DOM in a watcher callback after Vue has updated it, you need to specify the flush: post

from core.

You can define msg as prop in the Child component and emit the value like the example below :

<script setup>
defineProps('msg', {type: String});
defineEmits(['update:value'])
</script>

<template>
  <input :value="msg" @input="$emit('update:value', $event.target.value) />
</template>

For the parent component

<script setup>
import { ref, watch } from 'vue'
import ChildComp from './ChildComp.vue';

const msg = ref('Hello World!')

const updateMsgValue = (newVal) => {
  msg.value = newVal
}
</script>

<template>
  <input v-model="msg" />
  <ChildComp :msg="msg" @update:value="updateMsgValue" />
</template>

from core.

Thanks, @dadaguai-git, you nailed it! I had no idea that option existed. (I should probably read through the docs again.)

I'm not sure why this works, but my guess is a regular watcher is somehow shortcutting the normal event lifecycle, probably between the child @update:model-value event and the value that's getting passed back down, although I'm still not clear as to why this is needed with a child component, but not inside the parent component.

(Additionally, if you inspect the value present at the child component in the repro linked above, the correct value is being propagated downwards, but not being set at the native <input> level. That strikes me as odd.)

nextTick appears to behave identically to { flush: 'post' }. In both cases, msg.value gets updated twice for each keystroke, as expected:

<script setup>
import { ref, nextTick } from 'vue'
import ChildComp from './ChildComp.vue';

const msg = ref('Hello World!')

async function handleUpdate() {
     await nextTick();
     msg.value = ''
}
</script>

<template>
  <ChildComp v-model="msg" @update:model-value="handleUpdate" />
</template>

Closing this out as seemingly intended behavior, or at least one with a built-in workaround, but any further clarification would be appreciated.

from core.