Vue Add HTML Element dynamically

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Add HTML Element dynamically</h3>
        <button @click="addElement">Add Element</button>
        <div v-for="(element, index) in elements" :key="index">
            <h2>{{ element.title }}</h2>
            <p>{{ element.description }}</p>
        </div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    elements: [
                        {
                            title: 'Element 1',
                            description: 'This is the first element',
                        }
                    ]
                }
            },
            methods: {
                addElement() {
                    const newElement = {
                        title: 'New Element',
                        description: 'This is a new element',
                    }
                    this.elements.push(newElement)
                },
            }
        })

app.mount('#app')
    </script>
    <style scoped>
        /* Center the button */
        button {
            display: block;
            margin: 0 auto;
        }

/* Style the elements */
        #app>div {
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

h2 {
            font-size: 28px;
            margin-bottom: 10px;
            color: #333;
        }

p {
            font-size: 18px;
            line-height: 1.5;
            color: #666;
        }

/* Add hover effect to elements */
        #app>div:hover {
            box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
            border-color: #888;
            transition: all 0.2s ease-in-out;
        }
    </style>

</body>

</html>