我使用vue可拖动包为我的项目，在这里你可以看到完整的组件：

<template>
  <div>
      <button class="btn btn-secondary button" @click="add">Add</button>
      <draggable tag="ul" :list="list" class="list-group" handle=".handle">
        <li
            class="list-group-item"
            v-for="(element, idx) in list"
            :key="element.name"
        >
          <i class="fa fa-align-justify handle"></i>

          <span class="text">{{ element.name }} </span>

          <input type="text" class="form-control" v-model="element.text" />

          <i class="fa fa-times close" @click="removeAt(idx)"></i>
        </li>
      </draggable>

    <rawDisplayer class="col-3" :value="list" title="List" />
  </div>
</template>

<script>
import { VueDraggableNext } from 'vue-draggable-next';
let id = 50;
export default {
  name: "handle",
  display: "Handle",
  instruction: "Drag using the handle icon",
  order: 5,
  components: {
    draggable: VueDraggableNext,
  },
  data() {
    return {
      list: [
        { name: "Navigation", text: "", id: 0 },
        { name: "Contact", text: "", id: 1 },
        { name: "Products", text: "", id: 2 },
      ],
      dragging: false
    };
  },
  computed: {
    draggingInfo() {
      return this.dragging ? "under drag" : "";
    }
  },
  methods: {
    removeAt(idx) {
      this.list.splice(idx, 1);
    },
    add() {
      id++;
      this.list.push({ name: "Navigation 2 " + id, id, text: "" });
    }
  }
};
</script>
<style scoped>
  .button {
    margin-top: 35px;
  }
  .handle {
    float: left;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .close {
    float: right;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  input {
    display: inline-block;
    width: 50%;
  }
  .text {
    margin: 20px;
  }
</style>

我使用vue3，因此我使用这个包https://www.npmjs.com/package/vue-draggable-next来避免错误一个可拖动的元素必须有一个项目槽但是这次，在我添加项目后，它会自动重新加载。我想避免，但我不知道哪里出错了。