How do I pass the div element outside setup function

Question

I am trying to add this to my vue app https://jsbin.com/yejehog/edit?html,js,console,output

I've added to my code, how do I pass the div id to Sortable.create? In my console I get error Uncaught Sortable: el` must be an HTMLElement, not [object Null]

import { Sortable, Swap } from 'sortablejs/modular/sortable.core.esm';
Sortable.mount(new Swap());

let list = document.getElementById("list")

Sortable.create(list, {
  multiDrag: true,
  selectedClass: "selected"
});

 <div id="list" v-for="(item, index) in points.pointList.collection">
<p>{{ item.name}}</p>
</div>

Tried aswell this

    const clueDiv = ref(null)

  Sortable.mount(new Swap());

    Sortable.create(clueDiv.value, {
      multiDrag: true,
      selectedClass: "selected"
    });

    #list(v-for="(item, index) in points.pointList.collection" ref="clueDiv")

Same error

Answer 1

First the list id should be added to the wrapper element that contains the items rendered using v-for then use onMounted hook to run init the sortable function :

<div id="list" ref="clueDiv">
  <div  v-for="(item, index) in points.pointList.collection">
   <p>{{ item.name}}</p>
  </div>
</div>

and :

 const clueDiv = ref(null)

onMounted(()=>{
 Sortable.mount(new Swap());

    Sortable.create(clueDiv.value, {
      multiDrag: true,
      selectedClass: "selected"
    });
})