аюсь сделать страницу, которая будет загружать текстовую строку (https://pastebin.com/Mp9sKy1A) на страницу, а затем заменить любой экземпляр--FML-[componentName] с соответствующим компонентом.

Так например--FML-[NoteBlock] будет автоматически заменен наNoteBlock составная часть.

Это то, что я до сих пор:

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>`)
    }

Выходные данные будут помещены в следующий шаблон:

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

Это на самом деле вроде работает. Однакоcomponent часть не вытягивается как фактический компонент, а<component> HTML-тег, который явно не является желаемым результатом. Есть ли способ заставить его работать как хотелось бы?

Вот полный файл SFC, если кому-то интересно:https://pastebin.com/yb4CJ1Ew

Это вывод, который я сейчас получаю:

<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>

<component> теги должны быть фактическими компонентами Vue