vue-computed-2.html

<div id="stock-app">
  <h3>Inventory</h3>
  <ul>
    <li v-for="product in products">{{ 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>