Vue Display Json Data in Table

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Vue Display JSON data as table</h1>
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>College Name</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='item in collegeData'>
          <td>{{item.id}}</td>
          <td>{{item.collegeName}}</td>
          <td>{{item.city}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          collegeData: [
            {
              'id': 1,
              'collegeName': 'Harvard University',
              'city': 'Cambridge, MA, USA'
            },
            {
              'id': 2,
              'collegeName': 'Stanford University.',
              'city': '450 Serra Mall, Stanford, USA'
            },
            {
              'id': 3,
              'collegeName': 'Massachusetts Institute of Technology',
              'city': '77 Massachusetts Ave, Cambridge, USA'
            },
            {
              'id': 4,
              'collegeName': 'University of Chicago.',
              'city': '5801 S Ellis Ave, Chicago, USA'
            },
            {
              'id': 5,
              'collegeName': 'California Institute of Technology',
              'city': '1200 E California Blvd, Pasadena, USA'
            },
            {
              'id': 6,
              'collegeName': 'University of Pennsylvania.',
              'city': 'Philadelphia'
            },
            {
              'id': 7,
              'collegeName': 'Princeton University',
              'city': 'Princeton '
            },
          ]
        }
      },
    });
  </script>
  <style scoped>
    table {
      font-family: Arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
    }

thead {
      background-color: #333;
      color: #fff;
    }

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

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

tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</body>
</html>