Vue Draggable中的计算列表

Question

我正在尝试制作应该具有拖放功能的todo应用。我希望用户能够在三种状态之间拖放待办事项：初始， wip 和完成。

我的Vuex商店中有以下数据结构：

projects: [],
todos: [
            {
            description: "Lorem ipsum dolor sit amet.",
            createdBy: 'userId,
            id: 'todoId',
            refId: 'projectId',
            status: 'initial'
            },
            {
            description: "Lorem ipsum dolor sit amet.",
            createdBy: 'userId,
            id: 'todoId',
            refId: 'projectId',
            status: 'wip'
            },
       ],

而不是有三个“原始”列表，用他们的待办事项收集每个状态，而是收集所有应用程序的待办事项，无论它具有什么状态，都在同一个todos数组中。然后status是定义待办事项状态的属性。然后我从商店使用以下getter来收集分配给当前正在查看的项目的待办事项：

initTodos(state){
            return (projectId) => {
                return state.todos.filter((todo) => {
                    return todo.refId == projectId && todo.status == "initial"
                })
            }
        },

每个状态当然有三个getter，这个是initial状态。安装了Vue Draggable后，我现在用这个计算方法在Project.vue文件中获取getter：

initTodos: {
        get() {
            return this.$store.getters.initTodos(this.id)
        },
        set(value) {
            console.log(value)
            this.$store.commit('updateList', value)
        }
    },

然后在模板中循环使用以下内容：

<draggable v-model="initTodos">
    <app-todo
    v-for="todo in initTodos"
    :key="todo.id"
    :id="todo.id"
    :description="todo.description">
    </app-todo>
</draggable>

我现在想知道：当我拖放时，有没有办法将待办事项的当前订单发送到商店，只更新此更改所涉及的待办事项？我可以看到当我从value记录initTodos.set时发送带有新订单的新数组。但是如何使用这些新信息更新待办事项？如果拖放到另一个列表（例如从initial到wip），这将如何工作？然后它将在两个使用相应的getter获取的计算列表之间。