useField mutates parent modelValue

What happened?

When i use form in nested component with modelValue property, useForm, bound to <input /> mutates parent component modelValue on <input /> @update:modelValue event.

Reproduction steps

npm i vee-validate@4.6.2

App.vue

<template>
  <div id="app">
    <SomePopup v-model="visible" />

    visible = {{ visible }}
  </div>
</template>

<script>
import SomePopup from './components/SomePopup.vue';
import { ref } from 'vue';

export default {
  name: 'App',
  components: { SomePopup },

  setup() {
    const visible = ref(true);

    return {
      visible,
    };
  },
};
</script>

SomePopup.vue

<template>
  <div v-if="modelValue" id="popup">
    <input name="email" v-model="email" />
  </div>
</template>

<script>
import { useField } from 'vee-validate';

export default {
  props: {
    modelValue: {
      type: Boolean,
    },
  },
  emits: {
    'update:model-value': (v) => typeof v === 'boolean',
  },
  setup() {
    const email = useField('email').value;

    return {
      email,
    };
  },
};
</script>

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

[Vue warn]: Component emitted event "update:modelValue" but it is neither declared in the emits option nor as an "onUpdate:modelValue" prop.

at <App>
[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Boolean, got String with value "sadsad".

at <SomePopup
modelValue="sadsad"
onUpdate:modelValue=fn
>

### Demo link

https://vue-bvzvxv.stackblitz.io

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](CONDUCT.md)

[zkulbeda]

Hi! For updating v-model variable, Vue 3 expects update:modelValue (docs). That’s why the first warn appears. Correct this line:

‘update:model-value update:modelValue’: (v) => typeof v === ‘boolean’,

For preventing vee-validate from emitting update:modelValue, use syncVModel option:

const email = useField('email', undefined, {
  syncVModel: false
}).value;

Full example: https://stackblitz.com/edit/vue-72nwzl?file=src/components/SomePopup.vue

[logaretm]

However, I believe this was a dangerous breaking change for a point release.

I agree. In hindsight, this should’ve been turned off by default. I reviewed the download numbers on v4 releases and docs metrics and rationalized it could be safe enough to sneak in because it would be easily missable otherwise especially since I did get a lot of issues requesting it.

Safe to say this is too late to revert now, but I will be more careful of such changes in the future. Thanks for your feedback!