vue router(router-view) not rendering components

Hi I am using vue3 and vue router. I have made few components but when I click the link, the URL works but pages/components are not displayed. I am using vue in laravel9.

app.js

import './bootstrap';

import '../sass/app.scss'

import {createApp} from 'vue'
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes.js';
import App from './App.vue'
import Profile from './Profile.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: routes.routes,
  });
createApp(App).use(router).mount("#home")

Profile.vue //component

<template>
	<div>Profile</div>
</template>

routes.js

import App from './App.vue';
import Profile from './Profile.vue';

export default {
    routes: [

        {
            path: '/home',
            name: 'App',
            component: App,
         
        },

        {
            path: '/profile',
            name: 'Profile',
            component: Profile,
         
        },
    ],
};

Home.blade.php

@section('content')
<div class="container">
    <div id="home">
        <router-view></router-view>
    </div>
</div>
@endsection

Link in App.vue

 <div class="d-flex pt-1">
        <router-link to ='/profile'>Profile component</router-link>
 </div>

My profile component is not showing when I click profile link