Vue Js Scroll to Element by Id

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <h3>Vue Js Scroll to element by id</h3>
      <button v-for="(element, index) in elements" :key="index" @click="scrollToElement(element.id)">{{ element.name
            }}</button>

<div v-for="(element, index) in elements" :key="index" :id="element.id" class="element">
            <h2>{{ element.name }}</h2>
            <p>{{ element.description }}</p>
        </div>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    elements: [
                        { id: 'element1', name: 'Element 1', description: 'This is the first element' },
                        { id: 'element2', name: 'Element 2', description: 'This is the second element' },
                        { id: 'element3', name: 'Element 3', description: 'This is the third element' },

]
                };
            },
            methods: {
                scrollToElement(id) {
                    const container = document.getElementById(id);
                    container.scrollIntoView({ behavior: 'smooth' });
                }
            },
        });
    </script>
    <style scoped>
        /* CSS code for the app container */
        /* CSS code for the app container */
        #app {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            font-family: Arial, sans-serif;
        }

/* CSS code for the title */
        h3 {
            margin-top: 40px;
            margin-bottom: 30px;
            font-size: 2.5rem;
            color: #333;
        }

/* CSS code for the buttons */
        button {
            display: inline-block;
            margin: 10px;
            padding: 1rem 2rem;
            border-radius: 5px;
            font-size: 1.25rem;
            font-weight: bold;
            text-transform: uppercase;
            color: #fff;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

button:hover {
            background-color: #2E8B57;
        }

/* CSS code for the element container */
        .element {
            padding: 3rem;
            margin-bottom: 2.5rem;
            background-color: #f7f7f7;
            border-radius: 10px;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
            grid-gap: 2rem;
            justify-items: center;
            align-items: center;
        }

/* CSS code for the element title */
        h2 {
            font-size: 2rem;
            color: #333;
            margin-bottom: 1.5rem;
        }

/* CSS code for the element description */
        p {
            font-size: 1.5rem;
            color: #666;
            line-height: 1.5;
            margin-bottom: 0;
        }

@media screen and (max-width: 600px) {
            .element {
                grid-template-columns: 1fr;
                padding: 2rem;
            }

h2 {
                font-size: 1.5rem;
            }

p {
                font-size: 1.25rem;
            }
        }
    </style>

</body>

</html>