Реализация кода на Vue JS

Всем привет, уже не знаю, что делать. Есть функционал на ванильном JS, хочу перенести его в VUE JS и вообще не понимаю как это можно реализовать тут. Хотя бы наставление.

  <div class="window_1" v-show="isDialog">
    <div class="window bg bg1">
      <div id="header_2" class="header">ВЫСЕЛИТЬ СОЖИТЕЛЯ</div>
      <div class="about" id="about_2" v-html="TextDialog"></div>
      <div class="choise">
        <div id="btn_success_1" class="btn success">Выселить</div>
        <div id="btn_discard_1" class="btn discard">Назад</div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: "DialogClient",
  setup: () => {
    const isDialog = ref(true)

    const TextDialog = ref("");

    let arraycolor_1 = [];
    let regExp_1 = /{(.*?)}/gi;
    let b_1, colors_1;
    let str_div_block_1, join_span_1, info_res;

    info_res = "{FFCC00}Привет дамы и {ff00ff}господа"

    CheckDialogStyleMsgBox()

    function CheckDialogStyleMsgBox()
    {
        let matches_1 = info_res.match(regExp_1);

        if(matches_1)
        {
          for(let i = 0; i < matches_1.length; i++)
          {
            colors_1 = matches_1[i].replace(/[\])}[{(]/g, '');
            b_1 = '#'+colors_1;
            arraycolor_1.push(b_1);
          }
        }

        join_span_1 = info_res.split('{').join("</span>"+'{');
        str_div_block_1 = join_span_1.replace(regExp_1,'<span class = span_color ref="text" style = color:# >');
        TextDialog.value = str_div_block_1;

        document.querySelectorAll('.window_1 span').forEach((sp, ind) =>
        {
          sp.style.color = arraycolor_1[ind];
        })
    }

    return {
      isDialog,
      TextDialog
    }
  }
}
</script>```