vue-computed-3.html

<div id="stock-app">
  <h3>Inventory</h3>
  <ul>
    <li v-for="product in products">
      <button v-on:click="product.amount += 1">Add</button>
      <button v-on:click="product.amount -= 1">Remove</button>
      {{ product.name }}: {{ product.amount }}
    </li>
  </ul>
  <span>Item totals: {{ itemTotal }}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#stock-app',
    data: {
	  products: [
	    { name: 'Apples', amount: 10 },
	    { name: 'Oranges', amount: 50 },
	    { name: 'Bananas', amount: 39 },
	    { name: 'Pears', amount: 4 },
	  ]
    },
    computed: {
      itemTotal() {
        return this.products.reduce((sum, item) => sum + item.amount, 0);
      }
    }
  });
</script>