Vuelidate: validate form with sub components

I might not be an expert in Vue. If you have declared validations in the child component and you want to access it from the parent component you can use reference the child component from parent component in this way.

In parent component it would be like

<template>
<my-child ref="mychild"> </my-child>
</template>

You can access the validations declared in my-child component which is $v object using

this.$refs.mychild.$v

and then you can use validations of child component in parent components with such ease. Hope this will make the job much easier then using complex ways and it worked for me.

The simplest way to get started with vuelidate for sub-components/form is to use Vue.js dependency injection mechanism provided by provide/inject pair. The $v instance created in parent component can be shared with children component.

As you more fine tune it, you can use Vuelidate data-nesting and only pass a subset of $v to your subcomponents. This is a roughly similar approach to how Angular does with nested Forms. It would look something like:

export default {
    data() {
        return {
            form1: {
                nestedA: '',
                nestedB: ''
            } /* Remaining fields */
        }
    },
    validations: {
        form1: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        },

        form2: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        }
    }
}

Alternately, you can declare independent instances of $v for each component. In your case, you will have one for parent and two for children. When you hit the submit button, get the reference of child component using $refs and check if nested form within the child component is valid or not.