In Vuejs select list box getting same value for all rows - vue.js

Question

I am creating 4 rows with 3 columns (2 text box and 1 select box). What ever the value selected in select component getting updated with other 4 rows also.
Here is my code
<tr
v-for="ingredient in ingredients"
v-bind:key="ingredient.id"
>
<td>
<input
type="text"
class="form-control"
id=""
v-model="ingredient.item_name"
/>
</td>
<td>
<input
type="text"
class="form-control"
id=""
v-model="ingredient.quantity"
/>
</td>
<td>
<select v-model="selected">
<option v-for="unit in units" v-bind:key="unit" > {{ unit }} </option>
</select>
</td>
</tr>
Here is my data
export default {
data() {
return {
selected:[],
units: ['gms', 'pound', 'kgs']
};
},

Answer 1

should works like this:
new Vue({
el: '#app',
data: {
ingredients: [
{ id: 1, item_name: 'foo', quantity: 0, selected: '' },
{ id: 2, item_name: 'bar', quantity: 0, selected: '' },
],
units: ['gms', 'pound', 'kgs']
}
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<table>
<tr
v-for="ingredient in ingredients"
v-bind:key="ingredient.id"
>
<td>
<input
type="text"
class="form-control"
v-model="ingredient.item_name"
/>
</td>
<td>
<input
type="number"
class="form-control"
v-model="ingredient.quantity"
/>
</td>
<td>
<select v-model="ingredient.selected">
<option v-for="unit in units" v-bind:key="unit" > {{ unit }} </option>
</select>
</td>
</tr>
</table>
<pre>{{ ingredients }}</pre>
</div>