JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<div id="app">
  <table>
    <thead align="left">
      <th>Quantity</th>
      <th>Price</th>
      <th>Subtotal</th>
    </thead>
     <tbody>
        <tr v-for="(item, index) in items">
          <td><input v-model.number="item.qty" size="10"></td>
          <td><input v-model.number="item.price" size="10"></td>
          <td><input v-model.number="subtotalRow[index]" readonly size="10"></td>
          <td><button @click="addRow(index)">+</button></td>
          <td><button @click="removeRow(index)">-</button></td>
       </tr>
       <tr>
         <td><strong>Total</strong></td>
         <td>{{total}}</td>
       </tr>
     </tbody>
   </table>
 </div>

JavaScript

var app = new Vue({
el: '#app',
      data: {
      	// dummy data
        items: [
        {qty: 5, price: 25 },
        {qty: 2, price: 16 },
        {qty: 8, price: 320 },
        {qty: 3, price: 88 }
        ],
      },
      computed: {
        subtotalRow() {
          return this.items.map((item) => {
            return Number(item.qty * item.price)
          });
        },
        total() {
          return this.items.reduce((total, item) => {
            return total + item.qty * item.price;
          }, 0);
        }
    },
    methods: {
        addRow(index) {
        	this.items.splice(index + 1, 0, {
          	qty: 1,  price: 0
            });
        },
        removeRow(index) {
            this.items.splice(index, 1);
        }
    }  
});