Vue.js 使用数据表、数组数组和vuex处理vuedraggable的正确方法是什么？

所以我和这件事纠缠不清。我有一个vuetify v-data-table，其中包含可扩展的行，其中包含我希望可以在行之间拖动的标记

数据存储在vuex中。主“列表”是一个对象数组-“outputfiles”。其中一个对象元素本身就是一个数组-“通道”。我希望能够将“通道”从一个输出文件拖到另一个输出文件，并将状态存储在vuex中

关于如何做到这一点，我查阅了很多参考资料，但本质上我需要在每行的基础上定义一个“draggable”，并将我的“list elements（channels）”放在每个draggable实例中

我觉得我需要使用带参数的getter，或是带参数的computed:value，但每次我尝试不同的东西时，我似乎都会被它踢到牙齿上

存储摘录：

state:
  outputFiles:[]

(output file is:)

{
  id:uuid(),
  channels:[]
}

(channel is:)

{
  id:uuid(),
  name:"channel name",
  etc.etc.etc.

            <v-data-table show-select single-select show-expand :headers="headers" :items="outputFiles" class="elevation-1" >
              <template v-slot:expanded-item="{ headers, item }">
                <td :colspan="headers.length">
                <v-container flex>
                <draggable
                  class="channel"
                  :list="getOutputFileChannels(item.id)"
                  data-description="item"
                  selectable
                  select-class="selected"
                  :group="{name:'channel'}" tag="ul"
                >
                  <li
                  v-for="channel in getOutputFileChannels(item.id)" 
                  @click:close="doDeleteChannelFromOutputFile({oFileId:item.id,oChanId:channel.id})"
                  :key=channel.id
                  >{{ channel.text }}</li>
                </draggable>
                </v-container>
              </td>
              </template>
              <template v-slot:item.actions="{ item }">
                <v-icon
                  small
                  class="mr-2"
                  @click="editItem(item)"
                >
                  mdi-pencil
                </v-icon>
                <v-icon
                  small
                  @click="deleteItem(item)"
                >
                  mdi-delete
                </v-icon>
              </template>
            </v-data-table>

输出.vue摘录：

state:
  outputFiles:[]

(output file is:)

{
  id:uuid(),
  channels:[]
}

(channel is:)

{
  id:uuid(),
  name:"channel name",
  etc.etc.etc.

            <v-data-table show-select single-select show-expand :headers="headers" :items="outputFiles" class="elevation-1" >
              <template v-slot:expanded-item="{ headers, item }">
                <td :colspan="headers.length">
                <v-container flex>
                <draggable
                  class="channel"
                  :list="getOutputFileChannels(item.id)"
                  data-description="item"
                  selectable
                  select-class="selected"
                  :group="{name:'channel'}" tag="ul"
                >
                  <li
                  v-for="channel in getOutputFileChannels(item.id)" 
                  @click:close="doDeleteChannelFromOutputFile({oFileId:item.id,oChanId:channel.id})"
                  :key=channel.id
                  >{{ channel.text }}</li>
                </draggable>
                </v-container>
              </td>
              </template>
              <template v-slot:item.actions="{ item }">
                <v-icon
                  small
                  class="mr-2"
                  @click="editItem(item)"
                >
                  mdi-pencil
                </v-icon>
                <v-icon
                  small
                  @click="deleteItem(item)"
                >
                  mdi-delete
                </v-icon>
              </template>
            </v-data-table>

{{channel.text}
mdi铅笔
mdi删除