При обновлении страницы не загружаются компоненты vue

Изучаю Vue js и столконулся с такой проблемой. Бек выполнен на Laravel и некоторые страницы отрисованы на vue js. имеется две страницы, категории и товары, которые подгружаются в один template. Для перехода между компонентами использую vue router

export default new VueRouter({
routes: [
    {
        path: '/ua/categories', component: Categories, name: 'index'
    },
    {
        path: '/ua/categories/:id', component: Products, name: 'products', props: true
    },
],
mode: 'history',
base: process.env.BASE_URL,

})

в каждом компоненте данные получаю через axiosи все отображается корректно categories.vue

const url = '/categories-list'

import Products from './products'

export default {
    name: "categories",
    components: {Products},
    data() {
        return {
            categories: [],
            catchError: false,
        }
    },
    mounted() {
        axios.get(url).then(response => {
            this.categories = response.data;
        }).catch(
            error => {
                console.log(error)
            }
        )
    }
}

const url = '/products-list/'

export default {
    name: "products",
    props: ['title'],
    data() {
        return {
            param_id: this.$route.params.id,
            products: [],
            sendProducts: []
        }
    },
    methods: {
        sendProductsElem(image, title) {
            this.$root.$emit('send', {image, title})
        },
    },
    mounted() {
        axios.get(url + this.param_id).then(response => {
            this.products = response.data
        }).catch(
            error => {
                console.log(error)
            })
    }
}

Но когда я нахожусь на странице с продуктами и перезагружаю её то на экране появляется только массив c данными полученных через axios, а сами компоненты не подгружены. Хотя я никгде не вывожу список полученных данных. Подскажите, что я не правильно сделал и как избавиться от этой проблемы. В консоле никаких ошибок нет.