Vuelidate 2 with Vue 3 $model not updating

Question

Why isn't v$.FormData.name.$model being updated?

I am in the process of updating a Vue 2 application to Vue 3. However I am having troubles getting Vuelidate to function as expected. The v$.FormData.name.$model is not being updated, it only takes the initial value. However v$.FormData.$model.name contains the up to date value but doesn't have the validator stuff.

I have converted this control to a SFC with <script setup> however the child and parent are still using Options api.

I have tried passing v$.FormData.name.$model as the v-model as well.

const FormData = reactive({});
const rules = reactive(Validations); // { FormData : { name: {}...
const v$ = useVuelidate(rules, { FormData }, { $autoDirty: true, $lazy: true });

...

watch(
  FormData,
  (oldValue, newValue) => {
    v$.value.FormData[control.vModel].$touch();
    emit("event_form_updated", {
      attributeName: props.control.vModel,
      model: v$.value.FormData[control.vModel],
    });
  },
  { deep: true }
);

...

  <component
        :is="components[control.component]"
        :control="control"
        :options="control.options"
        :values="control.value"
        v-model="FormData[control.vModel]"
        :v="v$.FormData[control.vModel]"
        v-show="showCtrl(control)"
        :tab-index="100 * (index + 1)"
      />
    </span>

Answer 1

Posting the answer for anyone else who might run into the issue. It seems Vuelidate or one of it's dependencies doesn't like the vue/compat build. Once I swapped to the regular Vue 3 library the proxy value started pulling through correctly.