Vue table with select row

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.21/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h2>Vue Table with Selected Row</h2>
    <p> {{selectedRows}}</p>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id" :class="{ 'selected': isSelected(item) }"
          @click="toggleSelected(item)">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </tbody>

</table>

</div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          items: [
            { id: 1, name: 'John', email: 'john@example.com' },
            { id: 2, name: 'Jane', email: 'jane@example.com' },
            { id: 3, name: 'Bob', email: 'bob@example.com' },
            { id: 4, name: 'Andrew', email: 'andrew@example.com' },
          ],
          selectedRows: [],
        }
      },
      methods: {
        isSelected(item) {
          return this.selectedRows.indexOf(item) !== -1;
        },
        toggleSelected(item) {
          const index = this.selectedRows.indexOf(item);
          if (index === -1) {
            this.selectedRows.push(item);
          } else {
            this.selectedRows.splice(index, 1);
          }
        },
      },
    });
    app.mount('#app');
  </script>
  <style scoped>
    #app {
      max-width: 800px;
      margin: 0 auto;
      padding: 24px;
      font-family: Arial, sans-serif;
      color: #333;
    }

/* Style the paragraph element inside the container */
    #app p {
      margin: 16px 0;
      font-size: 18px;
    }

table {
      border-collapse: collapse;
      width: 100%;
      max-width: 600px;
      margin: 20px auto;
    }

th,
    td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
    }

th {
      background-color: #f2f2f2;
    }

tr:hover {
      background-color: #f5f5f5;
    }

.selected {
      background-color: #fafad2;
    }

tbody tr:last-child td {
      border-bottom: none;
    }

@media screen and (max-width: 600px) {
      table {
        font-size: 14px;
      }
    }

@media screen and (max-width: 400px) {
      table {
        font-size: 12px;
      }
    }
  </style>
</body>

</html>