I have a large Table. I am using Bootstrap and implementing the Accordion structure with "b-accordion". When I want to update the data in any Row, I am experiencing an incredible loss of performance. I am using Modal to edit rows. (B-MODAL)

My table content is like this. When the row is clicked, the Accordion below opens.

Table Generate Code..

<tbody>
    <template v-for="(item, index) in pageArray">

      // Table Row
      <tr :key="`tableTr-${item.recordNo}`">
        <td :id="`accordion-${item.recordNo}-1`" v-b-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>

Now let's get to the real problem. When I start the EDIT process for any Row, Vue Developer Tools draws a performance like the one below. The low performance ones are all because of the Model I opened.

B-MODAL I made as a Component

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

UPDATE

I realized that the problem is not Button related, it is triggered when non-v-b-toggle TD's are pressed. However, I still can't find a solution.