Vue.js, динамическое определение компонента внутри другого компонента

Пишу веб-приложение с использованием фреймворка Vue.js. Возникла следующая задача. Мне необходимо определить компонент_1, в нем определить компонент_2, а в компоненте_2 необходимо определить компонент_3, причем какой именно компонент будет определен в момент определения компонента_3, заранее неизвестно, эта информация должна передаться из компонента_1. Пока что есть мысль использовать для этих целей динамический импорт.

Компонент_1:

<template>
   <div>
      <component_2
         :component_3_data="component_3_data"
      />
   </div>
</template>

<script lang="coffee">
   import component_2 from "./component_2.vue"
   
   export default {
      data: () ->
         <!-- Тут будет условие, которое определит, 
         какой компонент будет определен как компонент_3 -->
         component_3_data = "component_3_title.vue"
   }
</script>

Компонент_2:

<template>
   <div>
      <!-- Тут будут динамически определяться компоненты, 
      в зависимости от условия в компоненте_1 -->
      <my_component_3/>
   </div>
</template>

<script lang="coffee">
   foo = async () ->
      return await import(steps_body)
   my_component_3 = foo()

   export default {
      props: {
         component_3_data: {type: Object, default: null}
      }
</script>

При выполнении - ошибка "async is not defined".