Dynamic Component Injection

_slug_now_work.vue

<template>
  <div class="container">
    <h1 class="text-2xl">{{ page.meta_h1 }}</h1>
    <component
      :is="component.name"
      v-for="(component, i) in components"
      :key="i"
      v-bind="component.props"
    />
  </div>
</template>

<script>
const getAsyncComponent = c => {
  const path = c.namespace ? `${c.namespace}/${c.name}` : c.name

  return {
    component: import(`@/components/${path}`),
    error: require('@/layouts/error')
  }
}

export default {
  async asyncData({ app, params }) {
    const { page } = await app.$axios.$get(
      `data${app.$i18n.path('services')}/${params.slug}.json`
    )

    return {
      page,
      slug: params.slug
    }
  },
  async beforeCreate() {
    // Не работает
    const { components } = await this.$axios.$get(
      `data${this.$i18n.path('services')}/${this.$route.params.slug}.json`
    )

    const result = components.map((c, i) => {
      return {
        name: () => getAsyncComponent(c),
        props: c.props
      }
    })

    this.components = result
  },
  head() {
    return {
      title: this.page.meta_title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.page.meta_description
        }
      ]
    }
  }
}
</script>

_slug_work.vue

<template>
  <div class="container">
    <h1 class="text-2xl">{{ page.meta_h1 }}</h1>
    <component
      :is="component.name"
      v-for="(component, i) in components"
      :key="i"
      :page="page"
      v-bind="component.props"
    />
  </div>
</template>

<script>
import { components } from '@/js/mortgage.js'

const getAsyncComponent = c => {
  const path = c.namespace ? `${c.namespace}/${c.name}` : c.name

  return {
    component: import(`@/components/${path}`),
    error: require('@/layouts/error')
  }
}

export default {
  async asyncData({ app, params }) {
    const { page } = await app.$axios.$get(
      `data${app.$i18n.path('services')}/${params.slug}.json`
    )

    return {
      page,
      slug: params.slug
    }
  },
  beforeCreate() {
  // Работает
    const result = components.map((c, i) => {
      return {
        name: () => getAsyncComponent(c),
        props: c.props
      }
    })

    this.components = result
  },
  head() {
    return {
      title: this.page.meta_title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.page.meta_description
        }
      ]
    }
  }
}
</script>