Tengo una mesa grande. Estoy usando Bootstrap e implementando la estructura Accordion con "b-accordion". Cuando quiero actualizar los datos en cualquier Fila, estoy experimentando una increíble pérdida de rendimiento. Estoy usando Modal para editar filas. (B-MODAL)

El contenido de mi tabla es así. Cuando se hace clic en la fila, se abre el Acordeón a continuación.

Tabla Generar Código..

 <tbody> <template v-for="(item, index) in pageArray"> // Table Row <tr :key="`tableTr-${item.recordNo}`"> <td :id="`accordion-${item.recordNo}-1`" vb-toggle="`collapse-${item.recordNo}`"> <a class="text-dark">{{ item.recordNo }}</a> </td> // Likewise the other 13 Columns. </tr> // Accordion Row <tr :key="`tableSubTr-${item.recordNo}`" class="subtr"> <td colspan="14"> <b-collapse :id="`collapse-${item.recordNo}`"> <div class="container-fluid"> .... </div> </b-collapse> </td> </tr> </template> </tbody>

Ahora vayamos al verdadero problema. Cuando inicio el proceso de EDICIÓN para cualquier Fila, Vue Developer Tools dibuja un rendimiento como el que se muestra a continuación. Los de bajo rendimiento son todos por el Modelo que abrí.

B-MODAL que hice como componente

 props: { thisObject: Object } <b-modal v-model="isModal" centered hide-footer hide-header size="xl" @hide="$emit('closeModal', true)"> {{thisObject}} </b-modal>

ACTUALIZAR

Me di cuenta de que el problema no está relacionado con el botón, se activa cuando se presionan los TD que no son de vb-toggle. Sin embargo, todavía no puedo encontrar una solución.