Draggable in Vue 3 won't display value - vue.js

Question

I am using Vue draggable to sort items from my Store.js by drag and drop (I've simplified my example here using only ['a', 'b', 'c'] as my store data).
I am also using a computed property made accessible from the setup()
<draggable v-model="myList" item-key="id" #start="drag=true" #end="drag=false" >
<template #item="{card}">
<p>{{ card }}</p>
</template>
</draggable>
import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
setup() {
const cards = computed(() => {
return ['a', 'b', 'c']
})
return {
cards
}
}
}
I know the template iterates through cards but no value is displayed or is neither accessible.

Answer 1

In Vue 3 - When setup is executed, the component instance has not been created yet. As a result, you will not have access to data, computed, methods component options.
Reference:
https://v3.vuejs.org/guide/composition-api-setup.html#accessing-component-properties
Also in Draggable component, the array item will be accessed by element variable.
Updated template code:
<draggable v-model="myList" item-key="id" #start="drag=true" #end="drag=false" >
<template #item="{element}">
<p>{{ element.value }}</p>
</template>
</draggable>
Try changing the component code as follows,
import draggable from 'vuedraggable';
export default {
name: "Dashboard",
components: {
draggable
},
data:function(){
return {
drag:false
}
},
computed:{
myList:function(){
return [{id:1,value:'Card A'},{id:2, value:'Card B'}];
}
}
}

Answer 2

yarn add vue-draggable-next
<draggable class="w-full mt-5 dragArea list-group" :list="list" #change="log">
<div
class="max-w-md p-2 mb-5 border cursor-pointer list-styles"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
</template>
<script>
import { defineComponent } from "vue";
import { VueDraggableNext } from "vue-draggable-next";
export default defineComponent({
components: {
draggable: VueDraggableNext,
},
data() {
return {
enabled: true,
list: [
{ name: "Medical science", id: 1 },
{ name: "Allied Medicine", id: 2 },
{ name: "Defense Service", id: 3 },
{ name: "Education training", id: 4 },
{ name: "Economics & Commerce", id: 5 },
{ name: "Banking & Finance", id: 6 },
{ name: "Enginnering", id: 7 },
{ name: "science", id: 8 },
],
dragging: false,
};
},
methods: {
log(event) {
console.log(event);
},
},
});
</script>