Динамический импорт компонента в HTML строке vue3

Есть div в который через v-html подставляется строка содержащая html разметку, например: (она может быть любой)

<div><img src="..."><p></p><img src="..."><span></span></div>

Задача в том, что мне необходимо найти все img и заменить их на vue компонент custom-image с передачей в него props, например ссылку на картинку. Через ref на div и querySelectorAll я нахожу все img, получаю их src, а что дальше можно сделать с этим массивом элементов не могу додумать. Кто-нибудь сталкивался?

<div ref="textRef" v-html="getText(textData)"></div>

import {CustomImage} from '@/components'

const getText = (text: string) => {
  if (textRef.value !== null) {
    const elements = textRef.value.querySelectorAll('img');
    elements.forEach((element: HTMLImageElement) => {
      const src = element.getAttribute("src")
      //
    });
  }
  return text;
};

Подставлять компонент в v-html не имеет смысла, т.к. эта директива интерпретирует как обычный HTML.

На выходе я ожидаю div в котором в котором будет отражено:

<div>
    //динамический компонент картинки
    <p></p>
    //динамический компонент картинки
    <span></span>
  </div>