How to get index of changed array under $watch in vuejs - vue.js

Question

I am using an array of objects
({"code":"id1","color":"red","description":"eg1"})
where each object contains input fields.User can dynamically add and remove those objects.
Now I want that when he enters code rest of the field should be filled automatically.
For that I have developed an algorithm which will take the code and will give me the color and description but for that I need the POSITION of the object which is changed so that I can update the array on that index itself.
Below is my share of code:
<div v-for="(x,i) in fabric_arr">
<!--<pre>{{x}}</pre>-->
<div class="row">
<div class="col-md-4">
<span>
<input type=”text” list="idOfDatalist" class="form-control border-input" placeholder="Fabric Code" v-model="x._id">
<datalist id="idOfDatalist">
<option v-for="y in all_fabrics">{{y._id}}</option>
</datalist>
</span>
</div>
<div class="col-md-4">
<span>
<input type=”text” class="form-control border-input" placeholder="Fabric Color" v-model="x.color"></span>
</div>
<div class="col-md-4">
<span>
<input type=”text” class="form-control border-input" placeholder="Fabric Description" v-model="x.description"></span>
</div>
</div>
</div>
And my controller:
watch: {
fabric_arr: {
handler : function (val) {
console.log("val");
console.log(val);
//val.color="red always";
this.fabric_arr[0].color="fghjkl"
},
deep: true
}
}

Answer 1

For all those who are looking for the answer,use v-bind:change() to trigger the changes and manipulate index there.
Below is the code:
<input type=”text” list="idOfDatalist" class="form-control border-input" placeholder="Fabric Code" v-model="x._id" v-bind:change="inpChangedForCode(x)">
<datalist id="idOfDatalist">
<option v-for="y in all_fabrics">{{y._id}}</option>
</datalist>