Vue router-link does not render the children routes

I have the following path in my routes array:

    {
        path: '/inventory-manager',
        name: 'InventoryManager',
        component: () => import('layouts/MainLayout.vue'), 
        children: [
          { path: '', component: () => import('pages/InventoryManager.vue') }
        ]
    }

MainLayout.vue how I use router-view:

    <q-page-container>
      <router-view />
    </q-page-container>

And I go to this path from my Home.vue with the following piece of code:

    <router-link :to="{ name: 'InventoryManager' }" class="col">
      <div class="logo">
        <q-img style="height:100px;" src="../assets/inventory-management.png"></q-img>
      </div>
      <div class="content flex flex-center text-bold">
        Inventory Manager
      </div>
    </router-link>

When I click on the router link, it renders the mainlayout but does not render the inventorymanager. But the weird thing is that, when I directly write and go to that url, then it renders the inventorymanager page. Basically it does not render only when I go to that link via router-link. Any solution to this?

Hi, you need to remove the component binding from the parent route

Like this:

 {
        path: '/inventory-manager',
        name: 'InventoryManager',
        children: [
          { path: '', component: () => import('pages/InventoryManager.vue') }
        ]
    }