Вставить Vue компонент в HTML строку

Question

У меня есть набор HTML строк, которые импортируются из файла. Они выглядят так:

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">{#}</div>

Я пытаюсь добиться внедрения компонента Vue, где я нахожу знак '{#}'.

Я разбил строку

  data() {
    return {
      template: this.$props.data.template.split("{#}")
    };
  }

Затем я поместил их в шаблон Vue

<template>
  <div class="section">
    {{ template[0] }}
    <Subsection />
    {{ template[1] }}
  </div>
</template>

. Мне нужно, чтобы значения в двойных фигурных скобках отображались как HTML. Я попытался с v- html, но он не работает из-за оболочки, которую он генерирует вокруг моего кода.