I am new to vue 3 and stuck at a point where I have two divs side by side and I want to show the component in the right div.I read the router documentation and tried to solve it but not succeeded. Here is a short version of the components

LeadSelection.vue: This is the component that I wanted to show in the right panel. Like this I will have some more components

<template>
    <div class="flex flex-col gap-4">
        ...
        <p class="font-normal text-[#91a3d9] text-center">
            Select the lead whose profile you want to check.
        </p>
    </div>
</template>

LeadList.vue: Here I am trying to show the components in the right panel based on names. Like I have table in left side. And buttons for addLead and load lead. So if row is select then I want to show the selection component. If add lead button is click then I want to show the add lead component in the right panel.

<template>
    <div id="left-side" class="flex flex-col bg-white rounded-lg w-3/5 p-10">
        ......
    </div>
    <div id="right-side" class="bg-[#dfe7fa] items-center place-content-center rounded-lg p-10 w-2/5">  
        <RouterView name="selection" />
        <RouterView name="profile" />
        <RouterView name="addLead" />
        <RouterView name="loadLead" />
    </div>
</template

LeadAndList.vue: In this component I have two buttons that switch the tabs. I know I should use RouterLink here, but I thought I would do it later. I don’t know how but let see

<script setup>
    import LeadList from './lead/LeadList.vue';
    ...
</script>
<template>
    div class="bg-[#f0f3fa] py-10">
        <div class="container mx-auto flex justify-center text-center mb-10">
            <button 
                id="leadTabButton" 
                class="tabButton w-1/6 text-white bg-blue-600 font-medium p-2"
                @click="showTab($event, 'leadTab')">
                Lead
            </button>
            <button 
                id="listTabButton" 
                class="tabButton w-1/6 text-blue-600 bg-white border border-blue-600 font-medium p-2"
                @click="showTab($event, 'listTab')">
                List
            </button>
        </div>
        <div class="container mx-auto flex">

            <div id="leadTab" class="tab flex w-full">
               <LeadList />
            </div>

            <div id="listTab" class="tab flex w-full hidden">
                <!-- List Component -->
                <p>List Tab Content</p>
            </div>
        </div>
    </div>
</template>

LeadAndListView.vue: This view I am using in router file to show the page

<script setup>
    import LeadAndList from '@/components/leadAndList/LeadAndList.vue'
</script>

<template>
    <LeadAndList />
</template>

defaultLayout.vue: This is the default layout that App.vue is using.

<template>
    <div class="layout-default">
        <header class="layout-default-header">
            <AppHeader />
        </header>
        <main class="layout-default-main">
            <slot />
        </main>
        <footer class="layout-default-footer">
            <AppFooter />
        </footer>
    </div>
</template>

App.vue

<script setup>

    import { RouterView } from 'vue-router'
    import DefaultLayout from '@/layouts/defaultLayout.vue'
    import { shallowRef } from 'vue'

    const defaultLayout = shallowRef(DefaultLayout)

</script>

<template>
    <component :is="defaultLayout">
        <RouterView 
            :currentLayout="defaultLayout" 
            @update:currentLayout="newLayout => defaultLayout = newLayout" 
        />
    </component>
</template>

LeadAndListRoutes.js. This is the route file. This file will contain the different routes that I wanted to show on the right panel

export default {
    path: '/lead',
    children: [
       { path: '', name: "leadAndListView", component: () => import('@/views/leadAndList/LeadAndListView.vue') },
   ]
};

Finally index.js

   ....
   import leadAndListRoutes from './routes/leadAndList/leadAndListRoutes';

const routes = [
    ...,
    { ...leadAndListRoutes },
]

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

export default router

My screen is looking like this. The right side is empty

I tried to use the following

import LeadSelection from '@/components/leadAndList/lead/LeadSelection.vue';

export default {
    path: '/lead',
    components: {
        default: LeadSelection
    },
    children: [
       { path: '', name: "leadAndListView", component: () => import('@/views/leadAndList/LeadAndListView.vue') },
   ]
};

But then I got the following

This is the content that I want to show in my right div. But now it is occupying the whole screen

Then I tried to use with the name like the following

   export default {
       path: '/lead',
        components: {
            'selection': LeadSelection
        },
        children: [
       { path: '', name: "leadAndListView", component: () => import('@/views/leadAndList/LeadAndListView.vue') },
       ]
    };

But it didn’t work. Then I tried to use components at the children level but it didn’t work. What I am doing wrong. I want to show different views based on the components.

Thanks