Estoy tratando de implementar arrastrable para mi tabla, y el formato de mi tabla se ve así

y desde aquí estaba tratando de implementar el arrastre, pero encuentro el siguiente error cada vez que trato de arrastrar y soltar el elemento en la tabla

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

aquí está el código completo incluye el script

 <table class="table table-bordered"> <thead> <th></th> <th>Name</th> <th>Year</th> <th>AGE</th> </thead> <tbody is="draggable" group="people" :list="people" tag="tbody"> <template v-for="(person, p_index) in people"> <tr :key="'person_'+p_index"> <td rowspan="2"> <button type="button" name="dragbtn" class="btn btn-icon btn-primary btn-xs"> <i class="la la-arrows"></i> </button> </td> <td rowspan="2">@{{ person.name }}</td> <td>2022</td> <td>@{{person.age}}</td> </tr> <tr> <td>2021</td> <td>@{{person.prev_age}}</td> </tr> </template> </tbody> </table> <script> Laravel.vueMixins.push({ data:{ people: [ {name: "Abby", age:16, prev_age:15}, {name: "Brooke", age:17, prev_age:16}, {name: "Courtenay", age:18, prev_age:17}, {name: "David", age:19, prev_age:18} ], }, }); </script>

alguien tiene solucion a este problema?

¡Gracias por adelantado!