The content of children component is not updated

[phuclh]

I installed the package and setup like below. The problem is when I visit children components, the breadcrumbs was showed up right, but the content of that child component didn't get change. For example, when I entered the cart page it didn't show up the content of CartPage component and still keeps content from HomePage component.

router/routes.js

export default [
    {
        name: 'home',
        path: '/',
        component: HomePage,
        meta: {
            breadcrumb: 'Homepage',
        },
        children: [
            {
                name: 'product',
                path: '/products/:id/:slug',
                component: ProductSingle,
                meta: {
                    breadcrumb: 'Product',
                },
            },
            {
                name: 'cart',
                path: '/cart',
                component: CartPage,
                meta: {
                    breadcrumb: 'Cart',
                },
            },
        ]
    }
];

router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueBreadcrumbs from 'vue-breadcrumbs';

Vue.use(VueRouter);
Vue.use(VueBreadcrumbs);

const router = createRouter();

export default router;

/**
 * The router factory
 */
function createRouter() {
    const router = new VueRouter({
        mode: 'history',
        routes,
        scrollBehavior(to, from, savedPosition) {
            return {x: 0, y: 0}
        }
    });

    return router;
}

[VasylDmytruk]

the same problem, how to fix this?