problems accessing to template `refs` with composition API

[salazarr-js]

following the v-for array refs and the template ref array with composition API examples I found that the template references array doesn't work as expected like with v-for, so we can't have acces correctly to the draggable elements references on the script

<Draggable
  tag="transition-group" 
  item-key="id"
  :component-data="{ tag: 'ul' }"
  :list="array"
>
  <template #item="{ element }">
    <div :ref="setAccountRef" >{{ element.id }} - {{ element.text }}</div>
  </template>
</Draggable> 

<script setup lang="ts">
import { ref, reactive, onBeforeUpdate, onUpdated, watch } from 'vue';
import Draggable from 'vuedraggable';

const elements = reactive([1, 2, 3, 4, 5].map((el) => ({ id: el, text: `Element ${el}` })));
const elementRefs = ref<Element[]>([]);

onBeforeUpdate(() => {
  elementRefs.value = [];
});

onUpdated(() => {
  console.log('element refs', elementRefs.value);
});

function setElementRefs(refs: Element) {
  if (refs) elementRefs.value.push(refs);
}
</script>

👩🏻‍🔬 I used the base vite-vue-ts template to replicate the issue in this stackblitz, the two components VForRefs.vue and DraggableRefs.vue shows the working v-for example and the other one using the vuedraggable component

🔥 we should have access to the elements ref, but the beforeUpdate and the updated lifecycle hooks doesn't seems to be triggered properly after modify the elements list when using composition API reactive and ref

System info

macOS v11.2.3 Node v16.13.1 npm 8.1.2

Packages

vue 3.2.25 vuedraggable 4.1.0

Builder

vite 2.7.2 @vitejs/plugin-vue 2.0.0 typescript 4.4.4 vue-tsc 0.29.8

Browser

Chrome 97.0.4692.99

[StefanFlaschko]

Same problem here. Are there any solutions/ workarounds for getting a NodeList from the draggable component?

[ReaganM02]

I've been looking an answers on how to use refs with the next version of vuedraggable but I cannot find it online. By following the v-for Array Refs documentation I came up with this solution. See stackblitz example https://stackblitz.com/edit/nuxt-starter-gcqtdj?file=app.vue