I'm stuck with a issue where I can not drag the dragged element after it is dropped to the table,

the objective is to drag the elements from top to down in the right time th.

**this is the table where the card element lands **

 <tr v-for="(space, i) of spaces" :key="space.id + '-' + i">
          <td slot="header">{{ space.name }}</td>
          <draggable
            v-model="space.tijden[time]"
            v-for="(bookings, time) in space.tijden"
            :key="space.id + '-' + time"
            group="bookingDrag"
            tag="td"
            @change="log"
            @update="(evt) => update(evt, this)"
            class="bg-light-gray"
          >
            <div
              v-for="item of space.tijden[time]"
              :key="item.id + '-booking'"
              class="bg-light"
          :data-id="item.id"
            >
              Time: {{ item.startTime }}~{{ item.endTime }}<br />
              Client :{{ item.name }} <br />
              {{ item.event }}
            </div>
          </draggable>

**this is the card **

  <draggable
      scope="col"
      @change="log"
        @update="(evt) => update(evt, this)"
      style="border: 1px solid black; min-width: 100px; min-height: 25px"
      v-model="booking"
      group="bookingDrag"
    >
      <transition-group type="transition" name="flip-list" tag="tbody">
        <b-card
          v-for="item in booking"
          :key="item.id"
          img-src="img.com/img1"
          img-height="150px"
          img-width="150px"
          img-alt="Image"
          tag="article"
          :data-id="item.id"
          style="img"
          class="mb-2"
        >
          <b-card-text>
            Time: {{ item.startTime }}~{{ item.endTime }}<br />Name:
            {{ item.name }} <br />
            {{ item.event }}
          </b-card-text>
        </b-card>
      </transition-group>
    </draggable>