second-vue.html

<div id="app">
    <ul>
        <li v-for="p in product">
            <input type="number" v-model.number="p.quantity"> 
            {{p.name}}
            <span v-if="p.quantity === 0">OUT OF STOCK</span>
            <button @click="p.quantity += 1">Add</button>
        </li>
    </ul>
    <h3>Total Inventory: {{totalP}}</h3>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            product: []
        },
        computed: {
            totalP() {
                return this.product.reduce((sum, p) => {
                    return sum + p.quantity
                }, 0)
            }
        },
        created: function() {
            fetch('https://api.myjson.com/bins/74l63')
            .then(res => {
                return res.json()
            })
            .then(json_data => {
                this.product = json_data.products
            })
        }
    })
</script>