Estoy intentando crear una página que cargue una cadena de texto https: //pastebin.com/Mp9sKy1) en una página y luego reemplace cualquier instancia de--FML-[componentName] con el componente apropiado.

Así por ejemplo--FML-[NoteBlock] se reemplazaría automáticamente conNoteBlock componente

Esto es lo que tengo hasta ahora:

pureContent () {
      const c = this.content.replaced
      const re = new RegExp(`<p>--FML-\\[(\\w+)\\]</p>`, 'g')
      return c.replace(re, ($0, $1) => `<component v-bind:is="${$1.toLowerCase()}"></component>`)
    }

La salida se colocará en la siguiente plantilla:

<template>
  <div>
    <site-header></site-header>
    <div class="wrapper">
      <side-bar></side-bar>
      <main class="container" v-html="pureContent()" />
    </div>
  </div>
</template>

Realmente funciona. Sin embargo, elcomponenta parte @ no se está incorporando como un componente real, sino como una<component> Etiqueta HTML, que obviamente no es el resultado deseado. ¿Hay alguna manera de hacerlo funcionar como se desea?

Aquí está el archivo SFC completo si alguien está interesado:https: //pastebin.com/yb4CJ1E

Esta es la salida que estoy obteniendo actualmente:

<main data-v-86dcc3c4="" class="container">
  <h1 id="creating-new-contexts">Creating new contexts</h1>
  <h2 id="section-title">Section Title</h2>
  <h3 id="section-subtitle-that-contains-additional-information">
    Section subtitle that contains additional information
  </h3>
  <p>
    Cillum ipsum ad veniam elit non. Sunt ea ut quis qui dolore id voluptate
    magna. Ex non commodo reprehenderit ipsum irure. Ad excepteur nulla ullamco
    et deserunt magna et sint reprehenderit sint esse commodo. Tempor duis anim
    nisi commodo incididunt ut ex et sunt laborum excepteur ea culpa laborum.
  </p>
  <component v-bind:is="noteblock"></component>
  <p>
    Officia esse Lorem ad duis dolore nostrud ex elit aliqua incididunt sint ad
    ex. Eiusmod do in ad aute nulla eiusmod tempor Lorem non. Qui sunt voluptate
    laborum mollit elit adipisicing minim dolore voluptate veniam incididunt
    proident ullamco. Ipsum est cupidatat occaecat pariatur ut aute.
  </p>
  <component v-bind:is="codeexample"></component>
  <component v-bind:is="propstable"></component>
</main>

Los<component>as etiquetas @ deben ser componentes Vue reales