I m trying to implement draggable for my table,and my table format looks like this

and from here I was trying to implement the draggable but encounter the error below every time I trying to drag and drop the item in the table

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

here is the full code include the 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>

anyone has solution on this problem ?

Thanks in advance!