可排序的VueDraggable不能正常工作，并在初始化时将所选项目发送到第一个项目

<template>
  <div>
    <draggable v-model="projectList" @end="handleSortEnd">
      <div v-for="project in projectList" :key="project.id">
        {{ project.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      projectList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
        // 其他项目...
      ],
    };
  },
  mounted() {
    // 将所选项目发送到第一个项目
    this.sendSelectedProjectToFirst();
  },
  methods: {
    handleSortEnd() {
      // 项目排序发生变化时触发
      this.sendSelectedProjectToFirst();
    },
    sendSelectedProjectToFirst() {
      // 获取排序后的项目列表
      const sortedProjects = this.projectList.slice();

      // 将所选项目发送到第一个项目
      const selectedProjectIndex = sortedProjects.findIndex(project => project.selected);
      if (selectedProjectIndex > 0) {
        const selectedProject = sortedProjects[selectedProjectIndex];
        sortedProjects.splice(selectedProjectIndex, 1);
        sortedProjects.unshift(selectedProject);
      }

      // 更新项目列表
      this.projectList = sortedProjects;
    },
  },
};
</script>