v-model on <Field> does not work in "@vue/compat" mode (vue 3.x, vee: 4.x)

[NicoHof]

What happened?

v-model does not sync the bind variable in vue compat mode (MODE: 3)

Reproduction steps

Please see this reproduction repo with instructions on how to test it:

https://github.com/NicoHof/vue-compat-vee-validate

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]: (deprecation COMPONENT_V_MODEL) Component declares "modelValue" prop, which is Vue 3 usage, but is running under Vue 2 compat v-model behavior. You can opt-in to Vue 3 behavior on a per-component basis with `compatConfig: { COMPONENT_V_MODEL: false }`.
  Details: https://v3-migration.vuejs.org/breaking-changes/v-model.html 
  at <Field modelValue="initial" onUpdate:modelValue=fn name="name"  ... >

Demo link

https://github.com/NicoHof/vue-compat-vee-validate

Code of Conduct

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

[NicoHof]

Update from my side: I found two ways to get around this issue.

Nr 1. Do not use the v-model shorthand
use the long version of v-model with the correct prop and event name from the (vue3) child component

<Field
  :model-value="url"
  @update:model-value="(newValue) => (url = newValue)"
  // instead of v-model="url"
>

Nr 2. Set MODE: 3 for vee-validate to fix v-model shorthand

• I kind of missunderstood how the compat mode works
• The compat configs need to be set on the child components, not (only) the parents.
• The global compatConfig MODE: 3 in compilerOptions in vue.config.js seems not to apply automatically to all components. Or am I missing here something, too? And this maybe only is true for third party packages?

So to set MODE: 3 for vee validate components this kind of works in this case:

import { Field, Form as ValidationForm } from 'vee-validate'
Field.compatConfig = { MODE: 3 };
ValidationForm.compatConfig = { MODE: 3 };

I think in this cases this works but I can imagine if the 3rd party library component has again child components itself the issue gets bigger since we cannot go down there and set the MODE: 3 recursively for all childs. Or can we?

Both solutions do not feel too good and a bit hacky.
Any other solution would be very welcome.