title: Vue.js How to recalculate the displayed data after changing the select-option?
body: <p>The task - when changing the unit of measurement, consider the total weight of the products.
  Now the data in the array is changing, but new data is displayed on the screen only when click on other input fields</p>
  
  <p>There is a table with data from the array, with the fields: Product name, net weight, quantity.
  There is a select in the table with a choice of unit of measure - kg, grams, in order to understand in which units the "net weight" is set
  for each value there is a conversion coefficient conversion_num from a separate array</p>
  
  <p>Now, when changing the unit of measure, the unitChange function is launched, which changes the data in the array, but the changes are not displayed on the screen.
  I tried with computed function, it work same.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr v-for="(comp, i) in st"&gt;
   &lt;td&gt;{{comp.name}}&lt;/td&gt;
    &lt;td&gt;
     &lt;input v-model.number="comp.weight_netto"&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;select @change="unitChange($event.target.value, i)" v-model="comp.unit_id"&gt;
      &lt;option v-for="val in ul" :value="val.unit_id" v-text="val.name" &gt;&lt;/option&gt;
     &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;input v-model.number="comp.quantity"&gt;
    &lt;/td&gt;
    &lt;td&gt;{{itemqty(i)}}&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
  unitChange(value, i){
   for (var j=0; j&lt;this.ul.length; j++){
    if (this.ul[j].unit_id==value){
    this.st[i].conversion_num=this.ul[j].conversion_num;
    break;
    }
   }
  },
  itemqty(i){
    return (this.st[i].weight_netto*this.st[i].quantity)/this.st[i].conversion_num;
   }
  }
  </code></pre>