Почему scrollIntoView не работает в Vue 3, хотя я могу получить ссылку на элемент, к которому я пытаюсь прокрутить

У меня есть компонент Vue 3, который я пытаюсь настроить в качестве навигации для одностраничного приложения. Когда пользователь нажимает на элемент, я хочу, чтобы страница прокручивалась до элемента, содержащего контент для этого раздела.

Странно то, что я могу получить ссылку на div с помощью document.querySelector. Я могу записать div в консоль, однако, когда я пытаюсь вызвать scrollIntoView на div, он ничего не делает, если я не заключу element.scrollIntoView в функцию setTimeout.

Я уверен, что это как-то связано с жизненным циклом компонента Vue. Я пробовал обернуть свой код функцией onMounted, и это только привело к тому, что моя функция scrollPageTo выпала из области видимости.

<template>
    <div id="navigation-view" class="navigation-bar bg-gradient-to-tr w-full mx-auto flex items-start py-4">
        <div class="w-full mx-auto text-right">
                <nav>
                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('home-view')">
                        <i class="fa fa-home fa-lg"></i> Home
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('hello-view')">
                        <i class="fa fa-hands-helping fa-lg"></i> Hello
                    </a>

                    <a class="top-nav-item" href="#" v-on:click="scrollPageTo('contact-view')">
                        <i class="fa fa-envelope fa-lg"></i> Contact
                    </a>
                </nav>
        </div>
    </div>
    <div class="logo">
        <img src="/assets/img/615io-logo-wbg.png" alt="615io logo">
    </div>
</template>
<script lang="ts">
import {defineComponent, onMounted} from "vue";
export default defineComponent({
    setup() {

        const scrollPageTo = (navEl) => {
            console.log(`#${navEl}`);
            let element = document.querySelector(`#${navEl}`);
            console.log(element);
            element.scrollIntoView({behavior: 'smooth'});
        }

        return {
            scrollPageTo,
        }


    }
});
</script>