Target specific row with ValidationObserver on Vuetify data-table

Question

Essentially I have a ValidationObserver wrapped around a v-data-table with a button calling validate. So when you press the validate button I want it to only check validation on the row the button was pressed but instead it checks all the rows.

Here is a more slimmed down version of what I'm trying to do but still reflect the issue

   <ValidationObserver mode="passive" v-slot="{ validate }">
      <v-data-table
        :headers="headers"
        :items="items"
      >
        <template slot="item.postcode" slot-scope="{ item }">
          <ValidationProvider
            rules="required"
            :vid="`postcode${items.indexOf(item)}`"
            v-slot="{ errors }"
          >
            <v-text-field
              :error-messages="errors"
              v-model="item.postcode"
              class="mb-1"
              placeholder="Postcode"
              hide-details
              dense
            ></v-text-field>
          </ValidationProvider>
        </template>
       
        <template slot="item.actions" slot-scope="{ item }">
          <JobValidationTableAction
            @validate="validate()"
          ></JobValidationTableAction>
        </template>
      </v-data-table>
    </ValidationObserver>

Answer 1

Each ValidationProvider (VP) also has a validate function. What if you give the VP a ref and then call $refs['vp'+item.index].validate() ?

      <ValidationProvider
        rules="required"
        :vid="`postcode${items.indexOf(item)}`"
        v-slot="{ errors }"
        :ref="'vp'+item.index"
      >
    <!-- ... -->
    <template slot="item.actions" slot-scope="{ item }">
      <JobValidationTableAction
        @validate="$refs['vp'+item.index].validate()"
      ></JobValidationTableAction>
    </template>