Vue.js 为什么拖放时框的元素不会从一个框移动到另一个框？

我使用的是Vue Dragable，当将元素从一个框拖动到另一个框时，它会移动到同一个框，但不能在其他框中拖放/移动。假设我想将“1”从框1移动到框2。它不能拖到另一个箱子里。为了显示数据在数组中的状态，我使用了ShowData按钮来记录数据。检查元素的顺序

这里有什么问题

VUE代码

<template>
  <div id="app">
    <!-- LOG ALL DATA -->
    <button type="button" name="button" @click="showData()">show data</button>

    <div class="container">
      <draggable :list="numbers[index]" class="box" v-for="(array, index) in numbers">
        <div class="heading">
          box {{ index  + 1}}
        </div>
          <div class="box-data" v-for="x in array">
            {{ x }}
          </div>
      </draggable>
    </div>

  </div>
</template>

<script>
 import draggable from 'vuedraggable'

export default {
  data(){
    return {
      numbers: [
        [1, 2, 3, 4, 5],
        [6, 7, 8],
        [9, 10, 11, 12]
      ],
    }
  },
  components: {
    draggable,
  },
  methods: {
    showData() {
        console.table(this.numbers);
    },
  }
}
</script>

<style>

  #app{
    height: 100%;
  }

  html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
  }

  button{
    padding: 1rem;
    margin: 1rem;
    background-color: #984636;
    color: white;
  }

  .container{
      background-color: bisque;
      padding: 16px;
      margin: 16px;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  .box{
    width: 300px;
    height: 100%;
    background-color: pink;
  }

  .box-data{
    padding: .5rem;
    margin: 1rem;
    background-color: #f6f7f8;
  }
  .heading{
    text-align: center;
    margin-top: 1rem;
  }
</style>

显示数据
框{index+1}
{{x}
从“vuedraggable”导入可拖动
导出默认值{
数据（）{
返回{
编号：[
[1, 2, 3, 4, 5],
[6, 7, 8],
[9, 10, 11, 12]
],
}
},
组成部分：{
拖拉的，
},
方法：{
showData（）{
控制台.表格（此.编号）；
},
}
}
#应用程序{
身高：100%；
}
html，正文{
保证金：0；
填充：0；
框大小：边框框；
身高：100%；
}
钮扣{
填充：1rem；
保证金：1rem；
背景色：#984636；
颜色：白色；
}
.集装箱{
背景色：深蓝色；
填充：16px；
利润率：16px；
身高：100%；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
}
.盒子{
宽度：300px；
身高：100%；
背景颜色：粉红色；
}
.box数据{
填充：.5rem；
保证金：1rem；
背景色：#f6f7f8；
}
.标题{
文本对齐：居中；
页边顶部：1rem；
}

向可拖动组件添加一个道具

group=“box”

向引擎盖下的可拖动组件添加一个道具

group=“box”

，Vue。可拖动使用Sortable.js。如果要添加对多个列表的支持，则需要在sortable实例中提供group选项：有关更多信息，请参阅。在引擎盖下，Vue.Draggable使用sortable.js。如果要添加对多个列表的支持，则需要在可排序实例中提供group选项：有关更多信息，请参阅。