components are not loaded using vue's routerlink

Question

I am trying to load components to my "Home" Page using router-link and I am not able to. The URL changes to e.g. "/builder" but nothing on the actual page changes.

App.vue

<template>
<Home />
</template>

<style scoped>
*
{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Quicksand', sans-serif;
     color: white;
}

h1 {
  position:relative; right: -90px;
  color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  height: 800px;
  font-weight: bold;
}
h2 {
  position:absolute; top: 200px; right: 100px;
  color: rgb(255, 255, 255);
  font-family: 'Poppins', sans-serif;
  height: 200px;
  font-weight: bold;
}
</style>

<script>
  import Home from './components/Home.vue';
  export default {
    name: 'App',
    components: {
      Home,

    }
  }
</script>

Home.vue

<template>
<Header />
<h1>Welcome to Home Page</h1>
<p>This page, for the time being, is used as a starting point to naviagte between the pages provided in the naviagtion bar presented on top.</p>
  <component :is="'script'">

        window.addEventListener("scroll", function(){
              var header = document.querySelector("header");
              header.classList.toggle("sticky", window.scrollY > 0);
        })
  </component>
</template>

<script lang="ts">
import Header from './HomeHeader.vue'
export default {
  name: 'Home',
  components: {
    Header
  }
};
</script>

HomeHeader.vue

<template>
    <div class="navig">
    <router-link to="/home">Home</router-link>
    <RouterLink to="/builder">Start Building</RouterLink>
    <router-link to="">View Builds</router-link>
    <router-link to="">Pre-Builds</router-link>
    </div>
</template>
<script lang = "ts">
export default {
    name: 'Header'
}
</script>

index.ts

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import Builder from '../components/Update.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      name: 'builder',
      path: '/builder',
      component: Builder
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
  ]
});

export default router;

Update.vue (placement name)

<template>
  <Header />
  <h1>Welcome to the Building Page</h1>
</template>
<script>
import Header from './HomeHeader.vue'
export default {
    name: 'builder',
    components: {
      Header
    }
  }
</script>

I tried to connect the pages of "Home" and "Update" to the main "App.vue" page and it seemed to not work.