Getting path of validation error when validation fails in child component

[PiotrSzczeszek]

Description

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

We have a project that we migrate to vue 3. Vuelidate is the biggest struggle, so we decided to do it component by component while still using vuelidate 0.X for most components.

Unfortunatelly, we have a problem with migrating some more complex forms to new version.
Current state of these forms is attached in additional context.

With vuelidate 2.X we tried to migrate these more complex elemenets to sub-components to break up older elements and do some code cleanup.

It works nice for validating the child component, hovewer we are not able to get the information about validation source / field connection.

All we get is the name of validated property, and that's not what we really need / want.

The validation itself works fine

Describe the solution you'd like

We would like to have a way to get info about what was the full path to the field.
We can somewhat change how we validate tabs, but i would prefer not to change it too much.

What would be perfect, is some way to add a prefix to the path field in $errors, right now we get only:

"$propertyPath": "name" -- we can't be sure if same property does not exist in different subcomponent or parent component

Additional context

current code

Right now we have a lot of components where we have some collections / nested objects, and the whole form is in multiple tabs.

We also have a simple method to pass validation status of a tab to tab navigation component.

It kinda looks like this:

<tab-navigation
  :tab-configuration="tabs"
  :validations="$v"
/>

<!-- [...] -->
export default {
computed: {
  tabs: function() {
    return [
      {  id: "foo", text: "Foo", validations: v => [ v.model.title, v.model.age ] },
      {  id: "bar", text: "Bar", validations: v => [ v.model.translations ] }
    ]
  }
}

[...]

validations: {
  model: {
    title: { 
      required: required,
      minLength: minLength(5)
    },
    translations: {
      $each: {
        langIsoCode: {},
        text: {
          required: required
        }
      }
    } 
  }
}
}

and in the tab component it goes something like this:

<div v-for="(tab, key) in tabs" :key="key" class="tab">
  <div v-if="!checkTabValidation(tab)"> <i class="far fa-triangle text-danger" > </div>
  {{  tab.text}}
</div>

checkTabValidation: function(tab) {
  if (!tab.validations || !this.validations) return false;
  const elementsValidatedInsideOfTab = tab.validations(this.validations);
    
  return elementsValidatedInsideOfTab.some(x => x.$invalid);
}

New code

For the new code we tried to use the subcomponents. I've prepared the code sandbox