Best practices for a shared validation state between multiple Vue components?

[matthew-dean]

I have a very large component form that, for DX, is broken up into multiple sub-components. Before adding Vee-Validate / Valibot, this process was more or less straightforward, with form values being passed in as v-model props to specific sub-components.

However, what I want to do is to maintain one "validation state" for all of the sub-components, which implies a single useForm instance (I think?). I can't find any documentation or examples for the best way to do this. Are there common patterns to "share" Vee-Validate state between multiple components? Any best practices?

Note, this is TypeScript + Vue -- so I'm also looking for the best way to define types if I am passing around the same returned object.