Визуализация асинхронных компонентов после ответа на вызов axios в Vuejs

Question

Я пытаюсь создать небольшое приложение в Vuejs, где у меня есть компоненты панели мониторинга, на которых много компонентов виджетов, я хочу загрузить их асинхронно, поэтому я создал функцию в файле test.js согласно документации как:

export default item => () => ({
    component: item,
    loading: require('./Components/Loading.vue'),
    error: require('./Components/Error.vue'),
    delay: 200,
    timeout: 3000
})

и импортировал то же самое в моем приложении как:

import VueAsyncComponent from './test'
window.VueAsyncComponent = VueAsyncComponent

В моем dashboard компоненте я попробовал:

this.loading = true
axios.get('/api/page-components?slug=dashboard').then(response => {
    if(response.status === 200)
    {
        this.title = response.data.page.title
        if(response.data.page.content)
        {
            // This for reference of data pattern...
            const comp = {
                components: [
                    {name: 'PageHeader', location:'./../Layouts/PageHeader', 'data': {title: 'Dashboard'}},
                    {name: 'pageFooter', location:'./../Layouts/PageFooter', 'data': {title: 'Dashboard'}},
                    {name: 'leftAside', location:'./../Layouts/LeftAside', 'data': {title: 'Dashboard'}},
                ]
            }
            comp.components.forEach(function (val, index) {
                Vue.component(val.name, VueAsyncComponent(val.location))
            })
            this.loading = false
        }
        console.log(response.data)
    }
})

И в части HTML:

<template>
    <!-- begin:: Page -->
    <div v-if="loading" class="m-grid m-grid--hor m-grid--root m-page">
        <component v-bind:is="pageData[0].name"></component>
        <!-- begin::Body -->
        <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
            <component v-bind:is="pageData[1].name"></component>
            <div class="m-grid__item m-grid__item--fluid m-wrapper">
        </div>
        <component v-bind:is="pageData[2].name"></component>
    </div>
</template>

Я не получаю никаких ошибок при компиляции через webpack -> laravel-mix, но при рендеринге он не отображает компоненты и никаких ошибок в консоли:

Примерно так. Любые идеи, как я могу сделать эти компоненты после того, как я получу ответ от вызова axios.