Vuetify Draggable Data-table with nested children rows

I have a Vuetify data table with draggable rows. Working well. Here is my code:

  <template v-slot:body="props">
    <draggable
      :list="props.items"
      tag="tbody"
    >
        <tr
          v-for="(item, index) in props.items"
          :key="index"
          @drop="dropIntoParentRelationship($event, index)"
          @dragover.prevent
          @dragenter.prevent
          @dragstart="startDrag($event, item, index)" 
        >
          <td>
            <v-icon
              v-if="!_.isEmpty(item.children)" 
              color="#68007d"
              @click="show = !show"
            >add_circle</v-icon>
          </td>
          <td>
            <v-checkbox
              v-if="item.parent"
              color="#68007d"
            ></v-checkbox>
          </td>
          
          <td v-if="item.parent">
            <div class="text-truncate" style="max-width: 230px;">
              {{ item.product_title }}
            </div>
          </td>

          <td>
            <div class="text-truncate" style="max-width: 230px;">
              {{ item.sku }}
            </div>
          </td>
          <td class="text-center">
            <country-flag
              :country='countryFlags[item.marketplace]' 
              size='normal'
              class='text-center'
            />
          </td>
          <td class="text-center">
            <p class="mt-4">{{item.quantity}}</p>
          </td>
          <td class="">
            <p class="mt-4">{{item.currency_symbol}}{{item.price}}</p>
          </td>
          <td class="text-center">
            <v-icon 
              :color="item.on_shopify ? 'green darken-4' : 'red darken-4'"
            >
              {{ item.on_shopify ? 'done' : 'close' }}
            </v-icon>
          </td>
          <td class="text-center">
            <v-icon 
              :color="item.uploaded ? 'green darken-4' : 'red darken-4'"
            >
              {{ item.uploaded ? 'done' : 'close' }}
            </v-icon>
          </td>   
        </tr>
    </draggable>
  </template>

The issue however is that I want to display children data in a row underneath the parent data which I could then also drag and drop and I'm lost on how to do this.

Any ideas?