Vue 3 can't compile template with custom components that are imported locally.

[kkqy]

<component :is="compile(text.replace(/{(0x\d{2})}/, '<my-component :data=\'$1\'></my-component>'))" />

<script setup>
import MyComponent from "@/components/MyComponent.vue";
const text=ref("Play {0x01} Job")
});
</script>

but it doesn't work:

 Failed to resolve component: my-component
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

I have to register my component globally, and then it works well.
so, does "compile" function support only global components?
I didn't find any document of Vue 3 about this.

[Shyam-Chen]

import vue from '@vitejs/plugin-vue';

    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('-'),
        },
      },
    }),

[LinusBorg]

This question is not related to custom elements.

[Shyam-Chen]

Why is it necessary to use import { compile } from 'vue';?

<script lang="ts" setup>
import { reactive } from 'vue';
import { LeTextField, SeTextField } from 'awesome-components'; // Web Components

const flux = reactive({
  text: '',
  inputText(event: Event) {
    flux.text = (event.target as HTMLInputElement).value;
  },
});
</script>

<template>
  <component :is="'se-text-field'" :value="flux.text" @input="flux.inputText"></component>

  <!-- built by Lit -->
  <le-text-field :value="flux.text" @input="flux.inputText"></le-text-field>
  
  <!-- built by Svelte -->
  <se-text-field :value="flux.text" @input="flux.inputText"></se-text-field>

  {{ flux.text }}
</template>

[silentmantra]

The answer : https://stackoverflow.com/questions/78135450/how-to-compile-a-vue-template-with-other-components