Why can't register the component?

Question

Vue.js

One of the Vue components has text where placeholders (character sequences ### or @@@ ) are replaced with the corresponding component.

computed: {
            processedHtml () {
                let html = this.content.replaceAll('###', '<b-form-input type="text" size="sm" :name="name"></b-form-input>').replaceAll('@@@', '<gap></gap>');
                return {
                    template: '<div>' + html + '</div>'
                }
            }
        }

In the component's template:

<template>
  <component v-bind:is="processedHtml"></component>
</template>

However, there is an error
[Vue warn]: Unknown custom element: gap - did you register the component correctly? ...
found in
--->
at /src/components/Fill.vue
at /src/App.vue If you try to directly render

gap

in the component's template , then everything will work out

<template>
<gap></gap>
</template>

What could be the reason for such behavior?

Answer 1

This package will save