This project uses Vue 3 and Laravel 8.

I want to use vue-router for single page navigation without loading in new components and instead just using the router-links to scroll to sections similar to how anchor tags work:

  <router-link :to="{ hash: '#home' }">Home</router-link>

In Vue 2 I was able to do that by simply removing the component attribute from a route but in Vue 3 I am getting these errors in browser console when I do that:

[Vue Router warn]: Component "default" in record with path "/" is not a valid component. Received "undefined".

[Vue Router warn]: uncaught error during route navigation: app.js:40900

Error: Invalid route component
    at extractComponentsGuards (app.js:42803)
    at app.js:43926

[Vue Router warn]: Unexpected error when starting the router: Error: Invalid route component
    at extractComponentsGuards (app.js:42803)
    at app.js:43926

router.js:

import { createWebHistory, createRouter } from "vue-router";

import Home from "../vue/views/home";
import About from "../vue/views/about";


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {path: "/", name: "home", component: Home},
        {path: "/about", name: "about", component: About},
    ],
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return window.scrollTo({ top: document.querySelector(to.hash).offsetTop, behavior: 'smooth' });
        }
        return window.scrollTo({ top: 0, behavior: 'smooth' });
    }
});
export default router;

When I don't remove the component attribute from a route like so:

    {path: "/", name: "home"}

the home component is loaded in twice and overlaps either below the home component or is displayed at the end of the page.

How can I prevent that and just use the scrolling functionality?