Vue Js Delete Table Row Dynamically

<html>
<head>
  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    </script>
<body>
  <div id="app">
    <h3>Vue Js Add or Remove Table Row Dynamically</h3>
    <button @click="addRow" class="add-button">Add Row</button>
    <br />
    <table class="table">
      <thead>
        <tr>
          <th>Row Number</th>
          <th>Name</th>
          <th>Number</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(tableData, index) in tableRows" :key="index" :id="index" class="table-row">
          <td>{{ index + 1 }}</td>
          <td>
            <input type="text" v-model="tableData.name" />
          </td>
          <td>
            <input type="number" v-model="tableData.number" />
          </td>
          <td>
            <button class="delete-button" @click="deleteRow(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="module">
    import { createApp } from "vue";
    createApp({
      data() {
        return {
          tableRows: [{ name: "Vue", number: 123 },
          { name: "React", number: 345 }
          ],
          counter: 1,
        };
      },
      methods: {
        addRow() {
          this.counter++;
          this.tableRows.push({ name: "", number: "" });
        },
        deleteRow(index) {
          this.tableRows.splice(index, 1);
        },
      },
    }).mount("#app");
  </script>
</body>
</head>

</html>
<style scoped>
  .table {
    border-collapse: collapse;
    width: 100%;
  }

.table th,
  .table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

.table th {
    background-color: #f2f2f2;
  }

.table-row:hover {
    background-color: #f2f2f2;
  }

.add-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }

.add-button:hover {
    background-color: #3e8e41;
  }

.delete-button {
    background-color: #f44336;
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
  }

.delete-button:hover {
    background-color: #d32f2f;
  }
</style>