How can I add router-view for accessing child components or pages

[sujit-baniya]

Hi all, this template uses https://github.com/hannoeru/vite-plugin-pages for file based routing. I created a sub-route [id].vue
On the parent component, I added following code

<template>
  <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-1 mt-6">
    <section class="pl-2 w-full">
      <div class="px-2 py-2 sm:px-3 w-full border dark:bg-gray-800 bg-white shadow-primary mb-2 rounded-md">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
          Flow List
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500 dark:text-gray-200">
          All flow a user has
        </p>
      </div>
      <div class="max-h-[30vw] overflow-y-auto hidden-scrollbar scroll-smooth hover:scroll-auto">
        <FlowCard v-for="flow in flows" v-key="flow.id" :flow="flow"/>
      </div>
    </section>
    <section class="pl-2 w-full text-sm sm:col-span-3 md:col-span-4 lg:col-span-5">
      <router-view v-slot="{ Component }">
        <component ref="view" :is="Component" />
      </router-view>
    </section>
  </div>
</template>

So that I could visit nested route inside the router-view but instead it's opened on main router-view. Please suggest, in vue 3 using above package, how can I configure so that I could visit [id].vue on parent component (and not main app)