Tal como está mi código en este momento, hay N matrices en mis datos. Cada matriz contiene la información de M estudiantes. El objetivo es crear N tablas usando (vue-draggable), y dentro de cada una, M estudiantes arrastrables, para que todos se puedan mover, mientras se actualiza cada matriz. (n en 2 es solo un relleno, usará n en listNumber más adelante)

 <template> <div class="row"> <div class="col-3" v-for="n in 2" :key="n"> <h3>Draggable {{n}}</h3> <draggable class="list-group" :list="list1" group="people" @change="log"> <div class="list-group-item" v-for="(element, index) in list1" :key="element.name" > {{ element.name }} {{ index }} </div> </draggable> </div> </div> </template> <script> import draggable from "vuedraggable"; let id = 1; export default { name: "two-lists", display: "Two Lists", order: 1, components: { draggable, list1:[], }, data() { return { list1: [ { name: "John", id: 1 }, { name: "Joao", id: 2 }, { name: "Jean", id: 3 }, { name: "Gerard", id: 4 } ], list2: [ { name: "Juan", id: 5 }, { name: "Edgard", id: 6 }, { name: "Johnson", id: 7 } ], listNumber:3, }; }, methods: { add: function() { this.list.push({ name: "Juan" }); }, replace: function() { this.list = [{ name: "Edgard" }]; }, clone: function(el) { return { name: el.name + " cloned" }; }, } }; </script>

Tal como está ahora, mi código devuelve 2 tablas, Arrastrable 1, Arrastrable 2, sin embargo, el contenido de cada uno solo se extrae de la lista1. ¿Existe de todos modos que Draggable 1 tenga los elementos de list1 y Draggable 2 tenga los elementos de list2?