vu3中使用vuedraggable拖拽插件【跨列表拖动】

在我的vue+vite项目中使用vuedraggable插件需要用到插槽，否则不生效，以下是我的实现过程。
官网中的方法没有使用插槽，我不理解，期待大神指点一二。

下载插件

 npm i -S vuedraggable@next

同列表中拖拽

   <template>
  <div>
    <draggable v-model="list">
      <template #item="{ element }">
        <div class="item">{{ element }}</div>
      </template>
    </draggable>
  </div>
</template>
   
   <script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: ["Item 1", "Item 2", "Item 3"],
    };
  },
};
</script>

跨列表的拖拽

<template>
  <div class="item">
    <draggable v-model="list1" :list="list1" group="items" :move="onMove">
      <template #item="{ element, index }">
        <div class="item">{{ element }}</div>
      </template>
    </draggable>

    <draggable v-model="list2" :list="list2" group="items" :move="onMove">
      <template #item="{ element, index }">
        <div class="item">{{ element }}</div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { reactive } from "vue";
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  setup() {
    const state = reactive({
      list1: ["Item 1", "Item 2", "Item 3"],
      list2: ["Item 4", "Item 5", "Item 6"],
    });

    const onMove = (evt, originalEvent) => {
      console.log(evt, "--------", originalEvent);
      // 判断当前拖拽项是否可以移动
      return true;
    };
    return {
      ...state,
      onMove,
    };
  },
};
</script>
<style scoped>
.item {
  display: flex;
  justify-content: space-around;
}
</style>>