Vue draggable works for whole group but not for each item - vue.js

Question

The code below allows dragging the groups in toListFetchRouteA1:
<draggable id="first" data-source="juju" :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
<div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
<div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id">
{{personame.Player.Person.first_name}}
</div>
</div>
</draggable>
I am trying to allow dragging each person name rather than by group, so I changed :list="toListFetchRouteA1" into :list="teamfetch.Team_player_sessions" (shown below), but it throws an error: Cannot read property 'Team_player_sessions' of undefined".
<draggable id="first" data-source="juju" :list="teamfetch.Team_player_sessions" class="list-group" draggable=".item" group="a">
<div v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
<div class="list-group-item item" v-for="personame in teamfetch.Team_player_sessions" :key="personame.id">
{{personame.Player.Person.first_name}}
</div>
</div>
</draggable>
It does not drag as well. Is there a way to make div v-for="personame in teamfetch.Team_player_sessions draggable for personname?

Answer 1

The error occurs because teamfetch is out of scope. It was declared on the inner v-for but used in the outer element.
You could make the person names draggable by wrapping them in a second draggable (assuming you want the groups themselves and the names within the groups to be draggable):
<draggable :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
<div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
<!-- 2nd draggable for persons -->
<draggable :list="teamfetch.Team_player_sessions" draggable=".person">
<div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id" class="person">
{{personame.Player.Person.first_name}}
</div>
</draggable>
</div>
</draggable>
new Vue({
el: '#app',
data: () => ({
toListFetchRouteA1: [
{
id: 1,
Team_player_sessions: [
{
id: 100,
Player: {
Person: {
first_name: 'john'
}
}
}
]
},
{
id: 2,
Team_player_sessions: [
{
id: 200,
Player: {
Person: {
first_name: 'adam'
}
}
},
{
id: 201,
Player: {
Person: {
first_name: 'allen'
}
}
}
]
},
{
id: 3,
Team_player_sessions: [
{
id: 300,
Player: {
Person: {
first_name: 'dave'
}
}
},
{
id: 301,
Player: {
Person: {
first_name: 'dylan'
}
}
}
]
},
]
}),
})
.item {
background: #eee;
margin: 2px;
padding: 10px;
}
.person {
background: #ccc;
margin: 2px;
}
<script src="https://unpkg.com/vue#2.6.11"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<div id="app">
<draggable :list="toListFetchRouteA1" class="list-group" draggable=".item" group="a">
<div class="list-group-item item" v-for="teamfetch in toListFetchRouteA1" :key="teamfetch.id">
<draggable :list="teamfetch.Team_player_sessions" draggable=".person">
<div v-for="personame in teamfetch.Team_player_sessions" :key="personame.id" class="person">
{{personame.Player.Person.first_name}}
</div>
</draggable>
</div>
</draggable>
<pre>{{toListFetchRouteA1}}</pre>
</div>