typescript - 在 v-for 循环中通过 v-model 修改 Vuex 存储

我正在将 vuedraggable 与 Vuex 存储一起使用，文档建议每个组件都应该有一个 v-model 属性，直接指向数组，以便可以通过 setter 修改 Vuex 存储。

问题是：我正在动态地向 store 添加新的数组，并在模板中用 v-for 循环访问它们。在 v-for 内部使用 标签时，我使用方括号语法从列表中访问正确的数组。这会将数据渲染出来，但在这种情况下，v-model 无法修改状态，因为在“listOfArrays[index]”下没有 setter。

我试图通过将动态数组直接分配给具有随机生成名称的存储属性，并拥有一个包含属性名称列表的数组来解决这个问题，但改变它们的问题仍然存在。显然，我对这个有错误的想法。

我想要实现的是：有一种方法可以向 $store 添加新的数组，并且之后使用组件状态提交变更。我会感激指引正确的方向，或者提供替代方案。

<template>
 <div v-for="(array, index) in listOfArrays">
  <draggable v-model="listOfArrays[index]"> ..data... </draggable>
 </div>
</template>

<script lang="ts">
 get listOfArrays() {
  return this.$store.getters.listOfArrays;
 }

 set listOfArrays(value) {
  this.$store.commit('updateListOfArrays', value);
 }
</script>