Vue 3 - How to create infinite nested (expandable rows) table?

Question

I have a problem with nesting the expandable row components in my table. Currently, I just created <TableSubRow /> in my <TableRow /> component, then in <TableSubRow /> I created <TableSecondSubRow />.

TableSection.vue

<template>
  <tbody>
    <TableRow
      v-for="(row, index) in p.rowsList"
      @send-time-log-element="(value) => e('sendTimeLogElement', value)"
      @send-expand-status="sendExpandStatus"
      @send-selected-row="sendSelectedRow(row)"
      :key="index"
      :headers="p.headers"
      :row="row"
      :tasksTitle="p.tasksTitle"
      :sub-tasks-title="p.subTasksTitle"
      :expandCell="p.expandCell"
      :secondExpandCell="p.secondExpandCell"
      :same-cell-titles="p.sameCellTitles"
      :theme="p.theme" />
  </tbody>
</template>

TableRow.vue

<template>
  <tr>
    <!-- row template (doesn't matter in this case) -->
  </tr>

  <TableSubRow
    v-for="element in p.row[p.tasksTitle]"
    v-if="rowExpanded"
    @send-time-log-element="(value) => e('sendTimeLogElement', value)"
    @change-check-status="checkRow(element)"
    :key="element"
    :element="element"
    :headers="p.headers"
    :row="p.row"
    :tasksTitle="p.tasksTitle"
    :sub-tasks-title="p.subTasksTitle"
    :expand-cell="p.expandCell"
    :second-expand-cell="p.secondExpandCell"
    :same-cell-titles="p.sameCellTitles"
    :theme="p.theme" />
</template>

TableSubRow.vue

<template>
  <tr>
    <!-- sub row template -->
  </tr>

  <TableSecondSubRow
    v-if="isExpanded"
    @send-time-log-element="(value) => e('sendTimeLogElement', value)"
    @change-check-status="checkRow(p.element)"
    :headers="p.headers"
    :row="p.element"
    :tasksTitle="p.tasksTitle"
    :expand-cell="p.expandCell"
    :second-expand-cell="p.secondExpandCell"
    :same-cell-titles="p.sameCellTitles" />
</template>

In this case, I had to send props for each subrow (e.g. for expand status), which is bad I think. Of course, it works for statically defined amount of subrows.

How could I make dynamic expandable rows like on the screen above?

I tried to create a dynamic subrow component with subrow component (like recurrence?), but I had many issues there and didn't have enough time for this.

Now I need a dynamic expandable table and cannot define subrows static in code. It should be created automatically by backend data (nested objects or something like that).