how to handle duplicated v-slot names in vee-validate

Question

Let's say that I have a code like:

<Form
  v-slot="{ errors }"
  as="v-form"
>
  <v-card-text>
    <Field
      name="username"
      v-slot="{ field, errors }"
      rules="required"
    >
      <v-text-field
        v-bind="field"
        v-model="username"
        label="user"
        :error-messages="errors"
      ></v-text-field>
    </Field>
    <Field
      name="password"
      v-slot="{ field, errors }"
      rules="required"
    >
      <!-- keyup.enter should print errors of Form's v-slot -->
      <v-text-field
        v-bind="field"
        v-model="password"
        label="password"
        :error-messages="errors"
        v-on:keyup.enter="() => {console.log(errors)}"
      ></v-text-field>
    </Field>
  </v-card-text>
</Form>

Field and Form are vee-validate components.

In this code I want to console.log errors of Form's v-slot. But password Field's errors is printed out. How to separate errors of Form and errors of Field slots?

Answer 1

destructed slot properties may be renamed (errors → formErrors):

<Form
  v-slot="{ errors: formErrors }"
  as="v-form"
>
  <v-card-text>
    ...
    <Field
      v-slot="{ field, errors }"
      ...
    >
      <v-text-field
        ...
        :error-messages="errors"
        v-on:keyup.enter="() => {console.log(formErrors)}"
      ></v-text-field>
    </Field>
  </v-card-text>
</Form>