Array watch with Vue.js 2

I’m having a set of selects (item.pricelists that are assigned to an item) rendered in a v-for loop and bound with v-model. Possible select options for that item are rendered with another v-for from item.valid_pricelists. Both are pulled from the server in the same array. Now I need to watch for when user changes selection , so i can update the item.pricelists array with new values from item.valid_pricelists.

Render part :

<div v-for="(row,index) in item.pricelists">
    <select v-model="row.id">
        <option :value="price_list.id"  v-for="price_list in item.valid_pricelists">
        {{price_list.description}}
        </option>
    </select>
    Parent pricelist : {{row.parent_id}}
</div>

Watch part :

watch:{
    'item.pricelists.id': {
        handler: function (val,oldVal) {
            console.log(val + " - " + oldVal);
        }, deep:true}
}

Now, watch – that works just fine for simple vars – refuses to budge.

Here’s the fiddle with relevant part of the code.

I was looking at the vue docs, but can’t wrap my head around it. Any help would be appreciated.

Answer

I don’t know if it’s possible to solve this with watch, however, I would suggest another approach. You could add v-on:change to your selects:

<select v-model="row.id" v-on:change="selectionChanged(row)">

and add a method to the Vue instance:

new Vue({
  ...
  methods: {
    selectionChanged: function(item) {

    }
  }
}

This way you will know that selection has changed whenever the selectionChanged function is called.