javascript - How to use Vue draggabale in Vue js 3

Question

I'm trying to use Draggable in Vue js 3 but it shows me error: VueCompilerError: v-slot can only be used on components or <template> tags.

Here is my code

 <draggable tag="transiton-group" name="slide" item-key="id" @start="drag=true" @end="drag=false" v-model="todos">
  <li #item="" v-for="(todo, index) in filteredTodos" :key="todo.id" class="todo-item">
    <input @click="toggleDone(todo)" class="js-tick" id="1610198328386" type="checkbox" :checked="todo.done">
    <span :class="{ done: todo.done }">{{ todo.task }}</span>
    <img @click="deleteTodo(index)" class="delete" width="15px" height="15px" src="~@/assets/icon-cross.svg" alt="cross">
  </li>
</draggable>

Also mt transition group is not working anymore after I replaced it with draggable

Answer 1

#item="" is a shorthand of v-slot:item="" which should be used only with component tag :

 <draggable #item="" ...>
  <li  ...
</draggable>

or template tag :

 <draggable  ...>
  <template #item="">
   <li ...
  </template>
</draggable>