How can i drag and drop an item from one v-data-table to another?

Question

I have a parent v-data-table with expandable rows. Each row item has then its own v-data-table.

What I am trying to achieve: I aim to move an element from a nested v-data-table within one row of the parent v-data-table to the child v-data-table located in another row of the same parent v-data-table.

This essentially means transferring an item from one sub-table to another within the overarching data table structure. (Rephrase using GPT)

Here's a simple code for the v-data-table structure:

      <v-data-table 
        :headers="headers" 
        :items="pools" 
        :expanded.sync="expanded" class="elevation-1" show-expand            
        :single-expand="false" item-key="group" dense
      >

        <template v-slot:item.poolId="{ item }">
          <span style="margin-left: 30px">
            {{ item.poolId }}
          </span>
        </template>

        <template v-slot:expanded-item="{ headers, item }">
          <td :colspan="headers.length">
            <v-data-table
            :headers="subHeaders"
            :items="item.group"
            >
            <template v-slot:item.pickUpDateTimeUTC>
              {{ formatDateTimeWithTimeZone(item.pickUpDateTimeUTC,item.timeZoneString,item.timeZone) }}
            </template>
          </v-data-table>
          </td>
        </template>
      </v-data-table>

I have removed my draggable code since it was not working. So that it does not cause any confusion for the original code.

This is my code:

        <template v-slot:expanded-item="{ headers, item }">
          <td :colspan="headers.length">
              <v-data-table
              :headers="subHeaders"
              :items="item.group"
            >
              <template v-slot:item="childItem">
                <draggable v-model="childItem.item.group">
                  <tr>
                    <td>{{ childItem.item.memberId }}</td>
                    <td>{{ childItem.item.memberFullName }}</td>
                    <td>{{ formatDateTimeWithTimeZone(childItem.item.pickUpDateTimeUTC, childItem.item.timeZoneString, childItem.item.timeZone) }}</td>
                    <td>{{ childItem.item.pickUpAddress }}</td>
                    <td>{{ childItem.item.dropOffAddress }}</td>
                    <td>{{ childItem.item.specialRequirment }}</td>
                  </tr>
                </draggable>
              </template>
            </v-data-table>
          </td>
        </template>

This is how it looks, the headers and items do not align but it's draggable: