JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <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>
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        item : {
          pricelists:[
            {"id": 1 , "parent_id" : 0},
            {"id": 3 , "parent_id" : 2}
          ],
          valid_pricelists:[
            {"id":1 , "description": "Pricelist 1" , "parent_id" : 0},
            {"id":2 , "description": "Pricelist 2" , "parent_id" : 1},
            {"id":3 , "description": "Pricelist 3" , "parent_id" : 2},
            {"id":4 , "description": "Pricelist 4" , "parent_id" : 1}
          ]
        }
			},
      mounted: function() {
        console.log('mounted');
      },      
      watch:{
        'item.pricelists.id': {
            handler: function (val,oldVal) {
                console.log(val + " - " + oldVal);
                // then update pricelists id ,parent_id with valid_pricelists id , parent_id values
        }, deep:true}
		}
});