Vue Js Calculate quantity and Total price in Table

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue Js Calculate quantity and Total price in Table</h3>
    <table>
      <thead>
        <tr>
          <th class="fruit-name">Fruit Name</th>
          <th class="item-price">Item Price</th>
          <th class="num-items">Number of Items</th>
          <th class="total">Total</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="item.id">
          <td>
            <input type="text" v-model="item.fruitName" class="fruit-name-input" />
          </td>
          <td>
            <input type="number" v-model="item.itemPrice" class="item-price-input" />
          </td>
          <td>
            <input type="number" v-model="item.numItems" class="num-items-input" />
          </td>
          <td class="total-cell">{{ calculateTotal(item) }}</td>
        </tr>
        <tr>
          <td colspan="3" class="grand-total-label">Grand Total</td>
          <td class="grand-total">{{ grandTotal }}</td>
        </tr>
      </tbody>
    </table>
  
  </div>

]
        };
      },
      methods: {
        handleItemChange(index, key, value) {
          this.items[index][key] = value;
        },
        calculateTotal(item) {
          return item.itemPrice * item.numItems;
        },
      },
      computed: {
        grandTotal() {
          return this.items.reduce((total, item) => total + this.calculateTotal(item), 0);
        },
      }
    });
    app.mount("#app");
  </script>

table {
      width: 100%;
      border-collapse: collapse;
    }

thead {
      background-color: #f5f5f5;
    }

thead th {
      padding: 10px;
      text-align: left;
    }

tbody td {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }

input {
      padding: 5px;
      width: 100%;
      box-sizing: border-box;
    }

.fruit-name-input,
    .item-price-input,
    .num-items-input {
      border: none;
      background-color: #f9f9f9;
    }

.total-cell {
      font-weight: bold;
    }

.grand-total-label {
      text-align: right;
      font-weight: bold;
    }

.grand-total {
      font-weight: bold;
      color: #ff5733;
    }
  </style>
</body>

</html>