Vue 2 and Vuelidate 2 – Validating a child component from a custom npm component library

I’ve been searching the vuelidate-next (and vuelidate 0.x) documentation, github vuelidate repo (issues), and stackoverflow, but haven’t really found a solution for this issue that I currently have.

Main issue:

• Vuelidate is not collecting all validation $errors and $silentErrors when used with a child component from a custom npm component library.

Context behind this issue:

• I am currently building a Vue 2 component library (using the Options API), and using it in another Vue 2 (Options API) project (Parent Vue Project).
• When the component library is being tested in Jest and or StoryBook, the v$ setup object appears in the Vue inspector tool, and supplies all the usual information as normal (examples posted below).
• However, when the components are packaged for release via npm, then imported into another vue 2 project; the v$ setup object only returns information for vue 2 project instance, and completely ignores the validation for the library components.
• All the library components have $autoDirty: true (code example below).
• The components from the npm library render and function correctly within the Parent Vue Project, except for the validations through Vuelidate.
• The component library has functioning validation as far as I have tested (Validation works perfectly with both Jest and StoryBook).
• The components must have the validation rules within the custom npm library, and be validated in a parent wrapper within another project (client has specified this as a requirement, the examples posted below are a simplified representation of the actual code).

The Parent Vue Project code (not component library) looks like this:

<template>
    <div>
        <custom-input-component v-model="textValue"/>
            <span v-if="v$.value.$error" class="field validation-error">
              This field is required
            </span>
    </div>
</template>

<script>
    import { useVuelidate } from '@vuelidate/core';
    import { CustomInputComponent } from '@custom-components-library';
    
    export default{
        props:{...},
        data(){...},
        
          setup () {
            return {
              v$: useVuelidate()
            }
          },
        
        computed:{...}
        methods:{...}
    }
</script>

The npm component library package code looks like this:

<template>
    <div>
        <label for="name">Name: </label>
        <input type="text" :value="value">
    </div>
</template>

<script>
    import { useVuelidate } from '@vuelidate/core';
    import { required } from '@vuelidate/validators';

    export default{
        props:{
            value: {
                type: String,
                default: '',
            }
        },
        setup() {
            return {
              v$: useVuelidate({ $autoDirty: true }),
            };
        },
    
        validations() {
            return {
              value: {required},
            };
        }
  ...
  }
  </script>

v$ validation object in component library ( using Storybook with Vue 2)

v$:Object (Computed)
    $anyDirty:true
    $clearExternalResults:function $clearExternalResults()
    $commit:function $commit()
    $dirty:true
    $error:false
    $errors:Array[0]
    ...
    value:
        $anyDirty:true
        $commit:function $commit()
        $dirty:true
        $error:true
        $errors:Array[1]
        $externalResults:Array[0]
        $invalid:true
        ...
        required:Object

v$ validation object in Parent Vue Project (using Vue 2)

v$:Object (Computed)
    $anyDirty:true
    $clearExternalResults:function
    $clearExternalResults()
    $commit:function $commit()
    $dirty:true
    $error:false
    $errors:Array[0]
    ...

Web browser console errors:

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$error')" 

Component library build config:

{
    "compilerOptions": {
    "target": "es5",
    "module": "esnext"
  }
}

Questions:

• How can I get the child component to validate in the Parent Vue Project?
• My suspicion is that there are potentially two vuelidate instances, and the parent vuelidate object doesn’t know about the v$ validation rules in child components?
• Is there any way to overcome this, and be able to set validation rules within the npm library based components, and validate them within a parent wrapper within another project?