Vue 3 resolveComponent returns [object Object]

I’m trying to replace a (WordPress) shortcode string that comes from a REST API.
Now I want to replace ‘[faq]’ with a Vue 3 component called ‘FAqItem’.
For this, I use the function resolveComponent().

This is my code:

const html = ref(props.data.text)
const FaqItem = resolveComponent('FaqItem')
if (html.value.includes('[faq]')) {
    html.value = html.value.replace('[faq]', FaqItem);
}

Then in my template I use:

<div class="block prose xl:mt-12" v-html="html"></div>

Now this seems to work, but the replace function is returning [object Object].
How can I make this show my component itself?
It’s important that only the [faq] is replaced.

Thanks in advance!