How can we find out the parent element in which the vue draggable is dropped?

There are multiple v-autocompletes and I want to know which v-autocomplete is my draggable element dropped in So that I can rearrange them properly. If I try to move the v-chips (draggable component) into another v-autocomplete it does not get positioned properly. I am using vue-draggable library, any kind of help will be appreciated thanks!!

v-autocomplete(
    v-for="(cabinet, index) in cabinets"
    :key="index"
    v-model="selectedSystemCabinets[cabinet-1]"
    @input="updateSelectedSystems()"
    :items="systems"
    :label="$t('Controllers')"
    :rules="rules.nonEmptyArray"
    :id="cabinet"
    chips
    multiple
    return-object
    outlined
    color="primary"
    item-text="name"
    item-value="systemID"
  )
    template(#selection="data")
      draggable(
        :id="data.index"
        :list="selectedSystemCabinets[cabinet-1]"
        v-bind="dragOptions"
        :move="move"
        :group="{name: 'controllers', put: true}"
        @change="change(cabinet, $event)"
        @start="isDragging = true"
        @end="endDrag"
      )
        v-chip(
          draggable
          :ripple="false"
          :key="data.index"
          v-model="selectedSystemCabinets[cabinet-1][data.index]"
          @mousedown.stop
          @click:close="remove(cabinet, data.index)"
          @click.stop
          style="cursor: move;"
          :color="((isDragging && data.index === dragged.from) ? 'success' : 'primary')"
          close
          outlined
        ).ma-2
          span {{ data.item.name }}
          v-chip(
            x-small
            color="primary"
          ).primary-chip
            span(v-if="showPrimary(data) && cabinet === 1").text-uppercase {{ $t('primary') }}
            span(v-else) {{ getOrderNumber(data.index) }}