Как скомпилировать компонент внутри текста?

Question

Я использую bootstrap-vue, и у меня есть текст с link для модального вида, который выглядит следующим образом:

'Some Text 2 with <b-link v-b-modal.myModal>a link to modal</b-link>.'

Этот текст я положил внутрь <li></li>.

Есть ли способ сообщить Vue, что внутри этого текста я использую b-link компонент, который должен быть скомпилирован соответствующим образом?

МОЙ ДЕМО

Answer 1

Исправлено.

В <template>:

<details v-for="i in changeLog" :key="i.title">
  <summary>{{ i.title }}</summary>
  <ul>
    <li>{{ i.text }}
      <template v-if="i.linkText">
        <b-link v-b-modal.privacyModal> {{ i.linkText }}</b-link>.
      </template>
    </li>
  </ul>

В <script>:

data() {
  return {
    changeLog: [
      { title: 'Title 2 (with "bootstrap-vue" link)', text: "Some Text 2 with", linkText: "a link to modal" },
      { title: "Title 1", text: "Some Text 1" }
    ]
  };
}