Vue Перетаскивание отправляет выбранный элемент первым

Question

Привет, я использую Vue Draggable (Vue .Draggable) из Sortable в моем проекте nuxt 2.13. в моей сортировке все в порядке, за исключением того, что при первой попытке (когда страница загружается), когда я выбираю элемент, он будет отправлен в первый массив !! когда я пробую снова, я работаю нормально !! если я попытаюсь отсортировать свою подкатегорию, я тоже буду работать нормально !!

любая идея ??

ПРИМЕЧАНИЕ: cmsCat и все те this., которые вы не нашли в моем коде, добавляются глобально .

Я также удалил часть, не относящуюся к проблеме!

cmsCat - это mapGetter моих категорий.

<template>
<div class="ma-4">
  
  
  <draggable v-model="myCatArray" @end="onEnd" @choose="onChoose" @unchoose="onUnChoose" v-bind="getOptions()">
    <transition-group type="transition" name="sortable_transition">
      <categorylistcard v-for="(category, index) in cmsCat" 
      :key="category.id" 
      :cat="category" 
      :index="index" 
      :showforsub="showForSub"
      :parentarr="parentArr"
      @addnewsub="addNewCat()"
      />
    </transition-group>
  </draggable>
    

</div>
</template>

<script>
import addcatbtn from '~/components/global/cms/addcatbtn'
import returntoredirectbtn from '~/components/global/cms/returntoredirectbtn'
const categorylistcard = ()=>import('~/components/' + process.env.SITE_DIRECTION + '/cms/categorylistcard')
import {ALERT_TYPE, ALERT_METHOD} from '~/plugins/constants.js'


export default {
    layout:'cms',
    components:{
      'categorylistcard': categorylistcard,
      'addcatbtn': addcatbtn,
      'returntoredirectbtn': returntoredirectbtn
    },
    data(){
      return{
        dialog: false,
        editId: 0,
        newId: 0,
        title: null,
        catList: [],
        editIndex: 0,
        parentArr: [{id: 0, title: ''}],
        editSubCat: false,
        showBtn: true,
        onSubCat: false,
        showForSub: false,
        btnLoading: true,
        oldIndex: '',
        newIndex: '',
        dragOptions: {
            ghostClass: "sortable_ghost",
            chosenClass: "sortable_chosen",
            handle: ".sortable_handle",
            disabled: false
        },
        isMoved: false,
        myCatArray: [],
        originalCatArray: []
      }
    },
    methods:{
      
      getAll(){
        this.$fetch()
        this.showBtn = true
        this.onSubCat = false
        this.breadcrumbs = []
      },
      pushToParentArr(value){
        this.parentArr.push(value)
      },
      
      getOptions(){
        return this.dragOptions
      },
      onChoose(e){
          console.log(e)
      },
      onUnChoose(e){
          console.log(e)
      },
      async onEnd(event){
          console.log(event)

          // ***** Reorder By Sorting *****\\

          this.isMoved = true
          this.oldIndex = event.oldIndex
          this.newIndex = event.newIndex
          this.dragOptions.disabled = true
          let response = await this.axiosGet(`category/reorder/${this.originalCatArray[this.oldIndex].id}/${this.originalCatArray[this.newIndex].id}`)
          if(this.resOk(response.status)){
              this.noty(ALERT_TYPE[1], 'ok')
              this.isMoved = false
              // this.originalCatArray = this.myCatArray
              this.dragOptions.disabled = false
              this.addClassToMovedItems(this.oldIndex)
              this.addClassToMovedItems(this.newIndex)
              this.setCmsCat(this.myCatArray)
              this.originalCatArray = [...this.cmsCat]
              console.log(this.cmsCat[0])
              console.log(this.myCatArray[0])
              console.log(this.originalCatArray[0])
          }else{
              this.isMoved = false
              this.myCatArray = this.originalCatArray
              this.dragOptions.disabled = false
              this.addClassToMovedItems(this.oldIndex)
              this.addClassToMovedItems(this.newIndex)
          }
      },
      addClassToMovedItems(index){
          if((index == this.oldIndex || index == this.newIndex) && this.isMoved == true){
              return 'sortable_moved'
          }else{
              return ''
          }
      }
    },
    async fetch(){
      this.btnLoading = true
      let response = await this.axiosGet(`categories/admin/0/1`)
      if(this.resOk(response.status)){
        if(this.notEmpty(response.data)){
          this.setCmsCat(response.data.items)
          this.myCatArray = [...this.cmsCat]
          this.originalCatArray = [...this.cmsCat]
        }
        this.btnLoading = false
      }
    },
    
    created(){
      this.btnLoading = true
      this.$nuxt.$on('deletecat', (index)=>{
        this.removeCmsCat(index)
      })
      this.$nuxt.$on('editcat', (category, index)=>{
        this.title = category.title
        this.editId = category.id
        this.editIndex = index
        this.dialog = true
      })
      this.$nuxt.$on('editsub', ()=>{
        this.editSubCat = true
      })
      this.$nuxt.$on('showsub', (cat)=>{
        this.newId = cat.id
        this.showBtn = false
        this.onSubCat = true
        this.dragOptions.disabled = true
      })
      this.$nuxt.$on('opensub', (value)=>{
        this.showForSub = true
      })
      this.$nuxt.$on('rootlist', ()=>{
        this.$fetch()
        this.showBtn = true
        this.onSubCat = false
        this.showForSub = false
        this.parentArr= [{id: 0, title: ''}]
        this.dragOptions.disabled = false
      })
      this.$nuxt.$on('openlistclicked', (cat)=>{
          this.pushToParentArr(cat)
      })
    },
    mountd(){
      this.btnLoading = false
    }
}
</script>