Breaks after modifying the list later (e.g. async fetching)

[veodko]

I installed the latest version from npm into my vue 3 vuetify project, tried to use the directive method just like in the docs and while it all works perfect when doing just some statically defined data like in the docs, trying to do anything a little more advanced such as fetching the list items asynchronously (or just modifying the list value) breaks the draggable element and while you can still drag, it goes back to the original form once you release the item.

Example:

const list = ref([])
setTimeout(function() {
  list.value = [
    { id: 1, title: 'Item 1'},
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3'},
  ]
}, 100)

<VList
    v-draggable="[list, { }]"
  >
    <VListItem
      v-for="item in list"
      :key="item.id"
      :title="item.title"
    />
  </VList>

Drag any element and let it go, the list will still be in the same order. One workaround is to delay rendering of the VList component using v-if="list.length" but what in case I want to update the existing list?

[Alfred-Skyblue]

I'm sorry, in the directive of Vue, the bound ref value will be unpacked, so the re-copying of the ref cannot be monitored in the directive. There is no solution to this problem for the time being. You can use hooks or components first, thank you.