Vue Js Delete Table Row Dynamically

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <div class="table-container">
      <h3>Delete Table Row Dynamically in Vue Js </h3>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in tableData" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>
              <button class="cancel-button" @click="removeRow(item.id)">Remove</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

app.mount("#app");
  </script>

table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 1em;
    }

thead th {
      background-color: #f5f5f5;
      text-align: left;
      padding: 0.5em 1em;
      border-bottom: 1px solid #ddd;
    }

tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

td {
      padding: 0.5em 1em;
      border-bottom: 1px solid #ddd;
    }

td:first-child {
      font-weight: bold;
    }
   .cancel-button {
      background-color: #f44336;
      color: #fff;
      border: none;
      padding: 0.5em 1em;
      border-radius: 0.25em;
      font-size: 1em;
      cursor: pointer;
      transition: background-color 0.3s;
    }

.cancel-button:hover {
      background-color: #e53935;
    }

.cancel-button:focus {
      outline: none;
      box-shadow: 0 0 0 2px #ffcdd2;
    }
  </style>
</body>
</html>