Vuetify, drag and drop sort v-select, v-autocomplete, v-combobox with vue-draggable

SortSelector.vue

<template>
  <div>
    <v-combobox
        v-model="selectedSync"
        :items="[...selectedSync, ...itemsSync]"
        multiple
        item-text="text"
        item-value="value"
        return-object
    >
      <template #no-data>
        <v-list-item>
          No data available
        </v-list-item>
      </template>
      <template #selection="data">
        <draggable
            :id="data.index"
            :list="selectedSync"
            v-bind="dragOptionsChips"
            :move="move"
            @change="change"
        >
          <v-chip
              draggable
              v-model="selectedSync[data.index]"
              :key="data.item.value"
              @mousedown.stop
              @click.stop
          >
            {{data.item.text}}
          </v-chip>
        </draggable>
      </template>
    </v-combobox>

    <draggable v-model="selectedSync" v-bind="dragOptionsChips">
      <v-chip draggable v-for="(item, index) in selectedSync" :key="index">
        {{item}}
      </v-chip>
    </draggable>
  </div>
</template>

<script lang="ts">
  import {Component, Prop, PropSync, Vue} from "vue-property-decorator"
  import draggable from "vuedraggable";

  @Component({
    components: { draggable }
  })
  export default class ChipSelector extends Vue {
    name: string = "ChipSelector"

    dragged: {
      from: number,
      to: number,
      newIndex: number
    } = {
      from: -1,
      to: -1,
      newIndex: -1,
    }

    selectedSync: any[] = []
    itemsSync: any[] = [
      { value: 0, text: 'A' },
      { value: 1, text: 'B' },
      { value: 2, text: 'C' },
      { value: 3, text: 'D' },
    ]

    get dragOptionsChips() {
      return {
        animation: 200,
        group: { name: "group", pull: true, put: true },
        sort: true,
      }
    }

    move(value) {
      this.dragged = {
        from: parseInt(value.from.id),
        to: parseInt(value.to.id),
        newIndex: value.draggedContext.futureIndex,
      }
    }

    change(value) {
      if (value.removed) {
        // insert
        this.selectedSync.splice(this.dragged.to+this.dragged.newIndex,0, this.selectedSync[this.dragged.from])

        // delete
        if (this.dragged.from < this.dragged.to) // LTR
          this.selectedSync.splice(this.dragged.from, 1)
        else // RTL
          this.selectedSync.splice(this.dragged.from + 1, 1)
      }
    }

  }
</script>

<style scoped>

</style>

jsfiddle
https://jsfiddle.net/hakgeumkim/1d4ohjxg/54/