Vue Display Json Data in Table

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue 3 Display JSON Data in html page</h3>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in jsonData" :key="index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.email }}</td>
                    <td>{{ item.age }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="module">
        const { createApp, ref } = Vue;
        createApp({
            setup() {
                const jsonData = ref([
                    { name: 'John Doe', email: 'john@example.com', age: 30 },
                    { name: 'Jane Smith', email: 'jane@example.com', age: 25 },
                    { name: 'Bob Johnson', email: 'bob@example.com', age: 40 }
                ]);

return { jsonData };
            }
        }).mount("#app");
    </script>
    <style scoped>
        table {
            width: 100%;
            border-collapse: collapse;
            border-radius: 8px;
            overflow: hidden;
        }

thead {
            background-color: #f8f9fa;
        }

thead th {
            padding: 12px 16px;
            text-align: left;
            font-weight: bold;
        }

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

tbody tr:hover {
            background-color: #e2e5e7;
        }

tbody td {
            padding: 10px 16px;
        }
    </style>
</body>

</html>