title: how to change props value using method - Vue.js
body: <p>I am quite new in vue and working on a task which is based on vue.js. I am showing my data in a component using a prop. Now I want to add a method to increment the quantity of a product.</p>
  
  <p>here is my code:</p>
  
  <pre><code>&lt;div v-for="(products, index) in products"&gt;
    &lt;mdc-layout-cell span="2" align="middle"&gt;
      {{ products.product_barcode }}
    &lt;/mdc-layout-cell&gt;
  &lt;mdc-layout-cell span="2" align="middle"&gt;
    {{ products.product_quantity}}
  &lt;/mdc-layout-cell&gt;
  &lt;i class="mdc-icon-toggle material-icons float-left"
     aria-pressed="false"
     v-on:click="incrementItem(index)"&gt;
    add
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my JS:</p>
  
  <pre><code>export default {
      props: [
        'products',
      ],
      methods: {
  
        incrementItem(index) {
          let item = this.products[index];
          this.products[index].product_quantity =
            this.products[index].product_quantity + 1;
            console.log(this.products[index].product_quantity);
        },
      }
  </code></pre>
  
  <p>I can see the incremented value in the console, but the value is not increasing in the respective row. How could I increment the value of product_quantity? Any help would be highly appreciable</p>