Индекс v-data-таблиц плохо рендерится с v-slot: top

Question

У меня есть этот код, все oop, который показывает таблицы данных, сохраненные в массиве таблиц данных

<div v-for="(table,index) in tables" v-bind:key="index">
          <v-data-table
            :headers="headers"
            :items="table.plates"
            item-key="index"
            sort-by="name"
            class="elevation-1 mt-10"
          >
            <template v-slot:top>
              <v-toolbar flat color="white">
                <v-toolbar-title style="color:black">{{table.name}}</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-spacer></v-spacer>
                <v-dialog v-model="dialogQR" max-width="500px">
                  <template v-slot:activator="{ on }">
                    <v-btn color="background" dark class="mb-2" v-on="on" icon>
                      <v-icon>mdi-qrcode</v-icon>
                    </v-btn>
                  </template>
                  <v-card>
                    <v-card-title>
                      <v-icon x-large class="mx-3">mdi-qrcode</v-icon>
                      <span class="headline">Generando QR</span>
                    </v-card-title>

                    <v-card-text>
                      <v-container>
                        <v-col>
                          <v-progress-linear color="red darken-2" class="ma-2" buffer-value="0" stream></v-progress-linear>
                          <v-col><v-progress-linear color="red darken-2" class="ma-2" buffer-value="0" stream></v-progress-linear></v-col>
                          <v-col></v-col>
                          <v-col><v-progress-linear color="red darken-2" class="ma-2" buffer-value="0" stream></v-progress-linear></v-col>
                          <v-progress-linear color="red darken-2" class="ma-2" buffer-value="0" stream></v-progress-linear>
                        </v-col>
                        <v-col>

                        </v-col>
                      </v-container>
                    </v-card-text>
                  </v-card>
                </v-dialog>
                <v-dialog v-model="dialogPlate" max-width="500px">
                  <template v-slot:activator="{ on }">
                    <v-btn color="background" dark class="mb-2" v-on="on" icon>
                      <v-icon>mdi-plus</v-icon>
                    </v-btn>
                  </template>

                  <v-card>
                    <v-card-title>
                      <span class="headline">{{ formTitle }}</span>
                    </v-card-title>

                    <v-card-text>
                      <v-container>
                        <v-row style="text-align:center">
                          <v-col cols="12" sm="6" md="6">
                            <v-text-field v-model="editedItem.nombre" label="Plato"></v-text-field>
                          </v-col>
                          <v-col cols="12" sm="6" md="6">
                            <v-text-field v-model="editedItem.calorias" label="Calorias"></v-text-field>
                          </v-col>
                        </v-row>
                        <v-row>
                          <v-col cols="12" sm="6" md="6">
                            <v-autocomplete
                              v-model="editedItem.ingredientes"
                              label="Ingredientes"
                              :items="ingredients"
                            ></v-autocomplete>
                          </v-col>

                          <v-col cols="12" sm="6" md="6">
                            <v-text-field readonly v-model="editedItem.reportes" label="Reportes"></v-text-field>
                          </v-col>
                        </v-row>
                        <v-divider></v-divider>
                        <v-row class="mt-3">
                          <v-textarea
                            outlined
                            label="Alérgenos"
                            readonly
                            v-model="editedItem.alergenos"
                          ></v-textarea>
                        </v-row>
                        <v-row>
                          <v-btn @click="save(index)" dark color="background">Guardar</v-btn>
                          <v-btn @click="close()" dark color="red">Cerrar</v-btn>
                        </v-row>
                      </v-container>
                    </v-card-text>
                  </v-card>
                </v-dialog>
              </v-toolbar>
            </template>
            <template v-slot:item.action="{ item }">
              <v-icon small class="mx-2" @click="editItem(index, item)">mdi-pencil</v-icon>
              <v-icon small class="mx-2" @click="deleteItem(index, item)">mdi-delete</v-icon>
            </template>
          </v-data-table>`
        </div>

Проблема в том, что, когда я нажимаю, на кнопках, прикрепленных к v-слоту: top index не очень хорошо отрисовывается, я имею в виду, если я нажму sh первую кнопку таблицы l oop может хорошо определять индекс таблицы или нет, и это проблема, когда я пытаюсь добавить какой-либо элемент в таблицы.

Кто-нибудь может помочь мне решить проблему? Спасибо.