Vue Create Element Dynamic

<!DOCTYPE html>
<html>

<body>
    <div id="app">
        <h3>Vue Create Element Dynamically</h3>
        <button @click="addParagraph">Add paragraph</button>
        <div ref="paragraphContainer"></div>
    </div>
    <script type="module">
        const app = Vue.createApp({
            methods: {
                addParagraph() {
                    const newParagraph = document.createElement('p')
                    newParagraph.style.color = 'red'
                    newParagraph.style.fontSize = '18px'
                    newParagraph.textContent = 'This is a dynamically created paragraph.'
                    newParagraph.addEventListener('click', () => {
                        alert('Paragraph clicked!')
                    })
                    this.$refs.paragraphContainer.appendChild(newParagraph)
                }
            },
        })

app.mount('#app')
    </script>
</body>

</html>