Dynamically registered route is not working when it is just pushed

Question

Hi i'm facing a problem where i want to add new route dynamically

My route structure will look something like this

I'm using "vue-router": "^3.5.3"

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, name:'User'
      children: [
        {
          path: 'profile', component: Profile, name:'Profile'
            children: [
              {
                path: 'about', component: About, name:'About'
                  children: [
                    {
                      path: 'details', component: Details, name: 'Details'
                    }
                  ]
              }
           ]
        }
      ]
    }
  ]
})

Now my intention is to add child route to Details

this is how my pseudo code looks like

    findRouteWithName(routeObj,routeName)
    {
       // recursive find with any nested level 
       ....
       return foundRoute;
    }
    
    let routeObj = findRouteWithName(this.$router.options.routes,'Details');

    routeObj.children.push(Route object{});

    //this.$router.addRoutes([routeObj]) // this line creates problem as mentioned below in **problem:** 

Note: if i'm doing like this https://stackoverflow.com/a/48833074/10054910 it is creating multiple nested routes in the url

Problem: page is becoming blank with direct push on children even route does not change in url. with this https://stackoverflow.com/a/48833074/10054910 approach route changes in url but append 2 times

Please help me thanks in advance !!