feat: Sync useField with component v-model

[logaretm]

What

This PR adds a new capability to useField to allow it to automatically sync the v-model directive when it is used on the component that has called it.

This was a common question and issue where multiple people found syncing the modelValue prop themselves annoying.

I think this is a nice addition that is relatively safe to introduce into useField at this stage.

How

useField will now automatically make the component emit update:modelValue and listen to props.modelValue changes and sync it with the value property. It will also take into account the model modifiers like v-model.number.

For custom models names, you can control what the prop/event names are called with modelPropName option:

// component will now emit `update:custom` and sync `custom` prop value with the `value` returned from `useField`.
const { value } = useField('field', undefined, {
  modelPropName: 'custom'
});

You can disable this behavior if you prefer to do that yourself or if you have specific needs with syncVModel option:

// Now it won't emit anything and won't sync anything.
const { value } = useField('field', undefined, {
  syncVModel: false
});

TODO

• Make Field component use this behavior instead of implementing its own
• Write Tests
• Write docs

Caveats

For those who have been using useField multiple times in the same component it usually won't cause any issues unless you have a v-model being used on the component. this makes me think that this behavior could be disabled by default to avoid that rare case, but again useField was never encouraged to be used like that.

This is why useFieldModel was introduced to replace that use case.

[codecov-commenter]

Codecov Report

Merging #3806 (5309185) into main (3b50d89) will increase coverage by 0.12%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #3806      +/-   ##
==========================================
+ Coverage   96.54%   96.66%   +0.12%     
==========================================
  Files          68       68              
  Lines        1908     1920      +12     
  Branches      481      481              
==========================================
+ Hits         1842     1856      +14     
+ Misses         66       64       -2     

Impacted Files	Coverage Δ
packages/vee-validate/src/Field.ts	100.00% <100.00%> (+2.53%)	⬆️
packages/vee-validate/src/useField.ts	98.95% <100.00%> (+0.14%)	⬆️
packages/vee-validate/src/utils/common.ts	99.04% <100.00%> (+0.05%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3b50d89...5309185. Read the comment docs.