Individual v-selects for v-data-table rows - vue.js

Question

I am trying to create a table that allows me to have one v-select for each row of the "available" column and to save whatever the user selects, being either "In stock" or "unavailable" for that column. How exactly do i do that with the following table that contains the following data?
Table:
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<tr #click="props.expanded = !props.expanded">
<td class="text-xs-right">{{ props.item.name}}</td>
<td class="text-xs-right">{{ props.item.calories}}</td>
<td class="text-xs-right">{{ props.item.fat}}</td>
<td class="text-xs-right">{{ props.item.carbs}}</td>
<td class="text-xs-right">{{ props.item.protein}}</td>
<td class="text-xs-right">{{ props.item.available}}</td>
</tr>
</template>
</v-data-table>
</template>
Data:
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
available: '',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
available: '',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
available: '',
},

Answer 1

Use v-select and bind it to item.available on the item slot template...
<template v-slot:item="{ item }">
<tr>
<td>{{item.name}}</td>
<td>{{item.calories}}</td>
<td>{{item.fat}}</td>
<td>{{item.carbs}}</td>
<td>{{item.protein}}</td>
<td>
<v-select
v-model="item.available"
:items="['in stock','unavailable']">
</v-select>
</td>
</tr>
</template>
https://codeply.com/p/9zqiPQEl80