[Vuejs]-Why vueRouter still rendering all the other components as well? (much appreciated)

my app components :


<template>
  <div id="app">
    <h1>Welcome</h1>
    <div>
      <h2>Are you first time visiting?</h2>
      <router-link 
      to="/firstUser"
      > 
      Register </router-link>
    </div>
    <div>
      <h2>Continue with registration</h2>
      <router-link to="/returningUser"> Continue </router-link>
    </div>
    <div>
      <h2>Show all your info</h2>
      <router-link to="/registeredUser"> show </router-link>
    </div>
  </div>
  <div>
 <router-view />
  </div>
 
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
};
</script>

router index.js file:

import { createRouter, createWebHistory } from 'vue-router';
import firstUser from '@/views/firstUser';
import returningUser from '@/views/returningUser';
import registeredUser from '@/views/registeredUser';


const routes = [{
        path: '/firstUser',
        name: 'firstUser',
        component: firstUser,

    },
    {
        path: '/returningUser',
        name: 'returningUser',
        component: returningUser,

    },
    {
        path: '/registeredUser',
        name: 'registeredUser',
        component: registeredUser,

    },

]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router


and one of the pages firstUser: 



<template>
  <div>
    <form class="form" @submit.prevent="registerUser">
      <h4 class="">Register</h4>
      <my-input
        v-model="this.firstName"
        type="text"
        class="input"
        placeholder="First Name"
      />
      <my-input
        v-model="this.lastName"
        type="text"
        class="input"
        placeholder="Last Name"
      />
      <myButton @click="registerUser"> Register </myButton>
    </form>
  </div>
</template>

<script>
import myInput from "@/components/UI/myInput.vue";
import myButton from "@/components/UI/myButton.vue";
export default {
  name: "firstUser",
  components: { myInput, myButton },
  data() {
    return {
      user: [
        {
          firstName: "",
          lastName: "",
        },
      ],
      users: [],
    };
  },
  methods: {
    registerUser() {
      const newUser = {
        firstName: this.firstName,
        lastName: this.lastName,
      };
      this.users.push(newUser);
      console.log(newUser);
    },
  },
};
</script>