How to automatically route to nested child using router.push in nuxt.js

I am using nuxt.js. Here is my file dir:

-- pages
      -- aaa.vue
      -- aaa (directory)
         -- bbb.vue
what i see in the generated file: router.js in .nuxt (directory):
routes: [{
    path: "/aaa",
    component: _5d6eb9d6,
    name: "aaa",
    children: [{
      path: "bbb",
      component: _15576d9f,
      name: "aaa-bbb"
    }]
  }],

here is what i want to do:

from localhost:3000/aaa , I submit a form. It makes a call to rest service and then automatically goto "bbb" screen.

I tried to use this.$router.push({ name: "aaa-bbb" }) but it still stays at "aaa" screen.

If I rename aaa.vue (ex: to 111.vue) Or "aaa" directory (ex: to "222"). Then I am able to route to "bbb" screen. But I dont prefer this way.

Please help.

Read more here: https://stackoverflow.com/questions/66272037/how-to-automatically-route-to-nested-child-using-router-push-in-nuxt-js