v-model.lazy bind to a input,change event by ENTER won't update the value of input dom

[xflyyxfl]

Vue version

vue3.2

Link to minimal reproduction

https://codepen.io/xflyyxfl/pen/bGLxpaw

Steps to reproduce

It's quit a light online codepen ;
1 open it
2 change a number at the first input
3 ENTER ,then watch event will validate the number,if not the 3 times, it will change to the nearest one nextTick
4 All other bind dom will update right but the focus input dom won't

What is expected?

Change event by Enter should update the focus input dom

What is actually happening?

Change event by Enter won't update the focus input dom

System Info

No response

Any additional comments?

No response

[MoodyBones]

Hi xflyyxfl, thanks for sharing have you got any info on this?

I'm getting something similar, I tested it in Chrome & Safari and the UI input isn't updating properly. the function works as it should and i can see the variable updating in the devtools, but the UI doesn't update on ENTER.

I have v-model.lazy.trim="label" on an input element within a form element with @submit.prevent="onSubmit".

My script block looks like:

<script setup>
const emit = defineEmits(['noteAdded'])
const label = ref('')

function onSubmit() {
  if (label.value === '') return
  emit('noteAdded', label.value)
  label.value = ''
}
</script>

Heres my repo https://github.com/MoodyBones/nuxt3-play/blob/master/remindme/components/NoteForm.vue

If I remove .lazy it works on ENTER :)