<ul class="nav justify-content-space-between">

          <li class="nav-item active">

            <a @click="scrollTo('#home')" class="nav-link">HOME</a>

          </li>

          <li class="nav-item">

            <a @click="scrollTo('#FifthScreen')" class="nav-link">ABOUT</a>

          </li>

          <li class="nav-item">

            <a @click="scrollTo('#info')" class="nav-link">INFO</a>

          </li>

          <li class="nav-item">

            <a @click="scrollTo('#faq')" class="nav-link">FAQ</a>

          </li>

        </ul>

Its a single page application split into components. This are the buttons that need to navigate to the different components I have set up. I have tried chatgpt, v-slot api, and routing but none of these seem to work. In the inspector it says: The path is incorrect when I try to route the buttons. Is there a easy way to actually solve this issue and navigate down my page easy.