Let's recap:

<!-- Component X -->
<template>
  <div class="X">
    <Y>
      <component :is="child_component"></component>
    </Y>
  </div>
</template>

<script>
import Y from './Y.vue';
import Item from './Item.vue';

export default {
  name: 'X',
  components: { Y, Item },
  data() {
    return { child_component: 'item' };
  }
};
</script>

<!-- Component Y -->
<template>
  <div class="Y">
    <h1>Some other content</h1>
    <slot></slot> <!-- Component Z will be displayed here -->
  </div>
</template>

Here's how you can pass a custom component as a prop to another component:

:is is a special attribute that allows you to replace your actual component dynamically without being considered a regular prop. You can use a different attribute like el to forward the value to the component as shown below:

<template>
  <div>
    <component :is="el">
      <slot />
    </component>
  </div>
</template>
<script>
  export default {
    name: 'RenderDynamicChild',
    props: {
        el: {
            type: [String, Object],
            default: 'div',
        },
    },
  }
</script>

The element specified in the el attribute will be used as a child component. It could be an HTML tag or a reference to a custom component, with the default being a div.

Passing a custom component as a prop may seem tricky at first. Instead of declaring it in the parent component's components property, you need to have the dynamic component in a data or computed property and then use it as a prop in the template. The custom component doesn't need to be declared in the components property.

<template>
  <RenderDynamicChild :el="DynamicComponent">
    Hello Vue!
  </RenderDynamicChild>
</template>

<script>
import RenderDynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() {
    return {
      DynamicComponent: AnotherComponent,
    };
  },
};
</script>

You can also use a computed property for your dynamic component to easily switch between different components:

<script>
import DynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() { return { count: 0 } },
  computed: {
    DynamicComponent() {
      return this.count % 2 > 1 ? AnotherComponent : 'article';
    },
  },
};
</script>

Simply increase this.count to alternate between displaying AnotherComponent and a simple article HTML element.

Perhaps it's a bit late to address this question now, but I believe sharing this information could benefit others facing the same issue.

I've been exploring ways to transfer components within others in vue, and it seems that VUE3 offers a solution using named slots:

You can refer to the documentation here: https://v3.vuejs.org/guide/component-slots.html#named-slots

In essence, you can utilize the following structure:

<template>
  <div class="A">
    <slot name="ComponentC"></slot> <!-- ComponentC will be rendered here -->
  </div>
  <div class="A">
    <slot name="ComponentD"></slot> <!-- ComponentD will be rendered here -->
  </div>
  <div class="A">
    <slot></slot> <!-- These are the children components -->
  </div>
</template>

And within your B component:

<template>
  <div class="B">
    <A>
      <template v-slot:ComponentC>
        <h1>Title of ComponentC </h1>
      </template>
      <template v-slot:ComponentD>
        <h1>Title of ComponentD </h1>
      </template>
      <template v-slot:default>
        <h1>Title of child component </h1>
      </template>
    </A>
  </div>
</template>

If you want to incorporate another element into your functional component, here's how you can achieve that:

<script>
  import Vue from 'vue'
  import childComponent from './childComponent'
  Vue.component('child-component')
  export default {}
</script>


<template functional>
  <div>
    <child-component/>
  </div>
</template>

Source: https://github.com/vuejs/vue/issues/7492#issue-290242300

If you're looking to import a component dynamically within a parent component in Vue3, then yes, it is possible. You can achieve this by using the following syntax:

<component :is="child_component" />

To dynamically render the "child_component" itself, you can utilize:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

Here's an example to illustrate:

Let's imagine you have multiple child components (ChildA, ChildB, ChildC) that you want to load dynamically based on what you pass to the parent component (Parent). The Parent component structure would look something like this:

Parent

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';

const props = defineProps<{
    childComponent?: string;
}>();
const AsyncComp = defineAsyncComponent(() =>
  import(`./${props.childComponent}.vue`)
)
</script>

<template>
    <component :is="AsyncComp"/>
</template>

You can then dynamically call the Parent component wherever needed like so:

<Parent :childComponent="child-a"/>
<Parent :childComponent="child-b"/>
<Parent :childComponent="child-c"/>

For more detailed information, refer to this article:

https://medium.com/@pratikpatel_60309/dynamic-importing-component-templates-with-vue-js-78d2167db1e7