Bootstrap Vue nested tables issue with row IDs

Question

after a long research and tries to handle this issue myself, I'm here to ask for a help.

I use Bootstrap Vue to create a child component , in the parent component I use for 2 main tables, each main table has 1 nested table (using <data-table), and one of nested table has 1 nested table. The template structure is like that:

I noted that row.item.id are duplicated and the issue comes with the "Nested table 1.2" - when I click to row.toggleDetails - it shows not only the row I selected, but also a row from the neighboring table (Nested table 2.1). I used <template #row-details="row"> this template to show/hide nested tables, but after a research I saw this article Split row-details into multiple row in bootstrap-vue and understood that: BootstrapVue 's row-details row can't be expanded into more than one row. I tried to open a row.item.id, using ref table, but the function didn't find the ref of the "Nested table 1.2".

Here is my code:

<template>
  <div>
  <!-- Main table 1 -->
  <data-table
    :items="formatResponse(localData1, 'type1')" :fields="fields"
    ref="tableMain1"
  >
    <!-- Main table 1 templates -->
    <template v-slot:cell(id)="row">
      …
    </template>
    ...
    <!-- Show details (Nested table 1.1) -->
    <template v-slot:cell(show_details)="row">
      <div @click.stop="row.toggleDetails"> 
        <span v-if="row.detailsShowing"><i class="fa fa-angle-up text-primary"></i></span>
        <span v-else><i class="fa fa-angle-right"></i></span>
      </div>
    </template>

    <!-- Nested table 1.1 -->
    <template #row-details="row">
      <data-table 
        ref="innerTable1”
        :items="formatResponseInner(localData1, row.item, 'type1')"
        :fields="fields"
      >
        <!-- Nested table 1.1. templates -->
        <template v-slot:cell(name)="row">
          …
        </template>
        …
        <!-- Show details (Nested table 1.2) -—>
        <template v-slot:cell(show_details)="row">
          <div @click.stop="row.toggleDetails" v-if="hasProducts(row.item.countries)">
            <span v-if="row.detailsShowing"><i class="fa fa-angle-up text-primary"></i></span>
            <span v-else><i class="fa fa-angle-right"></i></span>
          </div>
        </template>

        <!-- Nested table 1.2 -->
        <template #row-details="row">
          <div v-for="(products, countryName) in getFilteredProducts(row.item.countries)" :key="row.item.id + '_' + countryName">
            <div class="table-responsive">
              <b-table-simple caption-top hover small>
                …
              </b-table-simple>
            </div>
          </div>
        </template>
      </data-table>
    </template>
  </data-table>

  <!-- Main table 2 -->
  <data-table
    :items="formatResponse(localData2, 'type2')""
    ref="tableMain2"
    :fields="fields"
    >

    <!-- Main table 2 templates -->
    <template v-slot:cell(id)="row">
      …
    </template>
    …
    <!-- Show details (Nested table 2.1) -->
    <template v-slot:cell(show_details)="row">
      <div @click.stop="row.toggleDetails"> 
        <span v-if="row.detailsShowing"><i class="fa fa-angle-up text-primary"></i></span>
        <span v-else><i class="fa fa-angle-right"></i></span>
      </div>
    </template>
    
    <!-- Nested table 2.1 -->
    <template #row-details="row">
      <data-table
        ref="innerTable2”
        :items="formatResponseInner(localData2, row.item, 'type2')"
        :fields="fields">
        <!-- Nested table 2.1 templates -->
        <template v-slot:cell(interval)="row">
          …                      
            
        </template>
      </data-table>
    </template>
  </data-table>
  </div>
</template>

Can someone tell me how to go through that issue, please?