How to implement VueJs child routing?

Question

Vue.js

There is such a routing

{
    path: "/user/:id",
    component: User,
    children: [{
        path: "profile",
        name: "profile",
        component: Profile
    },
    {
        path: "articles",
        name: "articles"
        component: Articles
    }]
}

Inside the User component ( parent ) I have basic information about the user loaded in created
Inside Articles , Profile information is already loaded for each component separately (also in created )
When I do router.push({ name: "articles", id: 1 } ) , then everything is ok: the User component loads the basic information, and the Articles component loads the user's articles, but when I do router.push({ name: "articles", id: 2 }) , the User works great, but the Articles leaves the user's articles 1 (it is not updated, i.e. createddoes not work with loading and data from the last linking is saved)

Answer 1

The most humane way to get around this problem is to use the key for the router-view,
namely the router-view in the User component.
you can also add watch to the id parameter, but there will be problems with this