Field component doesn't update model-value if it's initial value

[azamat-sharapov]

What happened?

Since v4.11.8 @update:model-value isn't triggered if the value is what was initially given via model-value. See repro steps.
As a sidenote, v4.11.8 has fixed old problem that I commented here.

Reproduction steps

1. Open console to see @update:model-value trigger log
2. Type in more characters into field (by appending to existing initial value of the field)
3. Erase those extra characters that you typed in
4. Observe that @update:model-value triggers any value except initial value of the field.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-radio-eabq7e?file=src%2FApp.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

That is expected, you aren't doing the two-way binding here. You are always setting the model-value to init.

  <div id="app">
    <Field
      id="test"
      name="test"
      type="text"
      :model-value="value" // 👈 Should be this
      @update:model-value="onUpdate($event)"
    />
  </div>

[azamat-sharapov]

@logaretm that hardcoded model-value was to simplify the example, in our big codebase, we have been relying on the previous behaviour and current one is breaking change. Following is to make this more clear:

// reusable Input.vue

<script>
const props = defineProps({
  modelValue?: string
})
const value = toRef(props, 'modelValue')
</script>

<Field
  :model-value="value"
  @update:model-value="$emit('update:model-value', $event)"
/>

// other components

<script>
const valueFromServer = ref()
const newPayload = ref()
fetchData().then((data) => valueFromServer.value = data)
</script>

<Input
  :model-value="valueFromServer"
  @update:model-value="newPayload.value = $event" 
/>

With such structure, as long as @update:model-value always triggered, we get perfectly working flow. However with new behaviour of @update, looks like we have to maintain internal state in reusable component, just to get consistent event emit. Other option is to use @input event instead, but it isn't recommended?

[logaretm]

The previous behavior you are referring to was a bug where update:modelValue was being emitted more times than it should. Typically only when the value changes. You find more info here #4461

If in your case there is a delay in getting the value to sync with the input, then you should be using a watcher to set the value to the new one.

I understand it might be breaking in your case but that wasn't intended either.