How to get refs element inside nested validation Observer in vee-validate

I'm struggling with problem of nested Validation Observer. After submit form I want to scrollIntoView to te element which has error. Problem that in list of root Validation Observer refs I don't have elements which are in this nested Observer. How I can reach it?

Vue: 2.6.11 Vee-validate: 3.4.5

Structure:

<ValidationObserver tag="form" ref="form">
  <ComponentA>
    <ValidationProvider vid="name1">
      <input>
    </ValidationProvider>
  </ComponentA>
  <ComponentB>
    <ValidationObserver ref="observer" slim>
      <ValidationProvider vid="name2">
        <input>
      </ValidationProvider>
      <ValidationProvider vid="name3">
        <input> HERE GOT ERROR
      </ValidationProvider>
    </ValidationObserver>
  <ComponentB>
</ValidationObserver>

So inside refs of form I can see only name1, but I need to have reference to element inside name2 as well.

JavaScript:

    const form = ref<InstanceType<typeof ValidationObserver>>();

    const getIdsWithError = () => {
      if (form.value?.fields) {
        return (Object.keys(form.value?.fields) as CONTRACT_FIELD_VID[]).filter(
          vid => form.value?.refs[vid]?.errors.length !== 0,
        );
      }
    };

    const scrollToElement = (fieldId: CONTRACT_FIELD_VID) => {
      return form.value?.refs[fieldId]?.$el.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    };
    
   // inside submit

   const vidsWithError = getIdsWithError();
   if (vidsWithError) {
        return scrollToElement(vidsWithError[0]);
      }