Javascript Vue3 vue可拖动下一个配置问题

我试图只包括所有相关的代码。这是针对Vue3和VueDraggableNext的。我想更改列表的顺序，而不是在列表之间移动它

以下是模板和相关脚本：

<template>
  <div class="childBox scripts">
   <draggable
       v-model="data.scriptList"
       element="div"
       class="dragArea"
       item-key="id"
   >
      <template 
        #item="{item}"
        element="div"
        class="selectedItems"
        item-key="id"
        :ref="item.label"
      >
         <span>{{item.label}}</span>
         <span class="remove" v-on:click="removeScript(item.id)"></span>
      </template>
    </draggable>
  </div>
</template>

import {ref} from 'vue';
import VueDraggableNext from 'vue-draggable-next';
    
export default {
  name: 'Scheduler',
  components: {
    Draggable: VueDraggableNext
  },
  setup() {
    const data = ref({
      scriptList: [
       {"id": 3, "label": "Yadda"},
       {"id": 2, "label": "Badda"},
       {"id": 13, "label": "Bing" }
      ]
    });
    
    return {
      data
    };
  },
methods: {
 removeScript: function(id) {
    //code here, but irrelevant.
},

{{item.label}
从“vue”导入{ref}；
从“vue可拖动下一个”导入VueDraggableNext；
导出默认值{
名称：“调度程序”，
组成部分：{
可拖动：VueDraggableNext
},
设置（）{
常数数据=ref({
脚本列表：[
{“id”：3，“label”：“Yadda”}，
{“id”：2，“label”：“Badda”}，
{“id”：13，“标签”：“Bing”}
]
});
返回{
数据
};
},
方法：{
removeScript:函数（id）{
//代码在这里，但不相关。
},

除以下情况外，上述代码中未呈现任何内容：

 <draggable modelvalue="" element="div" class="dragArea" item-key="id"></draggable>

如果我将可拖动部分替换为v-for，则会呈现，但当然不会呈现可拖动操作：

<div v-for="item in data.scriptList" 
  :key="item.id" 
  class="selectedItems list-group-item"
  :ref="item.label">
  <span>{{ item.label }}</span>
  <span class="remove" v-on:click="removeScript(item.id)"></span>
</div>

{{item.label}

这似乎是一个输入错误。导入组件时使用大写字母D，但在模板中使用小写字母D。它们应该是相同的-在组件声明中称之为draggable

您还需要将VueDragableNext作为“vue DragableNext”的一部分导入，因此名称需要用大括号括起来

import { VueDraggableNext } from 'vue-draggable-next';

components: {
  draggable: VueDraggableNext
},

 <draggable
       v-model="data.scriptList"
       element="div"
       class="dragArea"
       item-key="id"
   >

import{VueDraggableNext}来自“vue draggablenext”；
组成部分：{
可拖动：VueDraggableNext
},

尝试在components声明中将Draggable更改为Draggable我以前更改过大小写，然后再次更改，没有效果。仍然无法渲染，没有错误，但不起作用。我尝试过将其大写或非大写，但不起作用。您的导入还需要是：导入{VueDraggableNext}来自“vue Dragable next”；感谢您的尝试，但也不是这样。我很确定我缺少一些基本设置，我没有收到任何错误，只是什么都没有。如果有其他可以使用的Dragable工具，我也会洗耳恭听。我确实运行了vue Dragable next的代码。如果我把断点放进去。但是当新数据被添加到列表中时，没有一个断点被命中。就好像它没有得到数据一样，数据已经改变了。