Passing Vuelidate instance as modal data makes it undefined

Question

I have a Vuelidate instance in a form component. Another parent component includes it and needs to access it's validator instance through a 2-way model binding.

The weird problem is if I set Vuelidate instance in the child for model value, then it set as undefined in the parent component. Bu if a encapsulate it in an object like {validator} then data pass to parent successfully.

Parent component

<template>
  <MyForm v-model:modelValidator="formValidator" />
  <button @click="log" >Log Model Value</button>
</template>

<script>
export default { 
  setup(props) {   
    const formValidator = ref();

    const log= () => {
      //logs undefined if vuelidate is assigned directly in the child component
      console.log(formValidator.value)
    };

  return {log}
  }
}
</script>

Child Component

<script>
export default {
  props: {
    modelValue: null,
    modelValidator: null
  },
  emits: ["update:modelValue", "update:modelValidator"],
  setup(props, { emit }) {
    const state = computed({
      get: () => props.modelValue,
      set: (value) => emit("update:modelValue", value),
    });
    const modelValidator = computed({
      get: () => props.modelValidator,
      set: (value) => emit("update:modelValidator", value),
    });

   const  validator= useVuelidate({/*Rules...*/}, state);

   //CASE A: If I set directly the validator then parent component model value sets undefined
   modelValidator.value =validator;

   //CASE B: If I set directly the validator enclosed in an object then parent 
   //        component model value sets the expected object with validator. It's OK.
   modelValidator.value ={validator:validator};

}
</script>

Answer 1

Answered by dobromir-hristov at https://github.com/vuelidate/vuelidate/issues/1041

Instead of passing the validator as a prop back to a component, you can rely on our automatic parent-child internal communication.

If a component has useVuelidate called, it will collect all of it's children validation instances. They are not only accessible in the parent, but also augment it's $error and $errors properties, so you can use them as you wish.

Here is an example, using the scopes docs.

https://vuelidate-next.netlify.app/advanced_usage.html#validation-scopes