In Vue2 / Vee-Validate 3, it was possible to do the following to validate inputs at any depth:
<FormWrapper>
<ValidationObserver ref="validation">
<ChildComponent1>
<ChildComponent2>
<ValidationProvider rules="required">
<FormInput id="first-name" />
</ValidationProvider>
</ChildComponent2>
</ChildComponent1>
<ChildComponent1>
<ChildComponent2>
<ValidationProvider rules="required">
<FormInput id="last-name" />
</ValidationProvider>
</ChildComponent2>
</ChildComponent1>
</ValidationObserver>
</FormWrapper>
Regardless of the depth of nesting of the ValidationProviders, the ValidationObserver high up the component tree would detect all validation events on them automatically, and you could add a watcher on "$refs.validation.flags.invalid" to detect when the entire subtree became valid/invalid. Validation rules could be declared at the child component level.
Is there a way to achieve the same in Vue3 / Vee-Validate 4?
All of the examples from the Vee-Validate v4 documentation show using Form and Field components inside the same component template, and additionally having to define the entire form's schema in one place (rather than setting the rules against each child component).
I've tried basically repeating the above, using Form in place of ValidationObserver and Field in place of ValidationProvider, but I cannot achieve the desired effect.
Update
I have since managed to achieve the desired effect in Vue3 using Vuelidate. However if anyone figures out how to do this in Vee-Validate, I'd be interested.