The problems encountered when using vuedraggable to drag components in vue3 are recorded as follows:

1. There is no problem using the drag and drop plug-in in the template according to the official website, as follows:

Item is a named slot

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div> {{element.name}} </div>
  </template>
</draggable>

2. When using drag plug-in in JSX, an error is reported: draggable element must have an item slot

Note that the item slot is written as follows:

    const slots = {
      item: ({element, index}) => {
          return <div> {{element.name}} </div>
      }
    }
    render(h) {
      return <draggable v-model="myArray" item-key="id" v-slots={ slots }></draggable>
    }