Vue.js 3で部分ビュー(Bootstrapモーダル)中の値を操作できなくて困っています。

前提・実現したいこと

Vue.js 3で部分ビュー(Bootstrapモーダル)中の値を操作できなくて困っています。
初歩的な質問ですみませんが、

画面ファイルがindexとmodalで分かれていまして、
vue.jsの構築時に部分ビュー(modal)のdocumentをloadせず、後から動的にloadしていることが原因かとは考えています。

シングルページアプリケーションのような方法はとっておらず、
メイン画面からモーダルを表示しているだけです。

部分ビュー(modal)を後から動的にloadした場合に、vueを適応させる方法はありますでしょうか？

ご教授をお願いします。

該当のソースコード

html
1    <h4 class="modal-title" id="modalTitle">{{this.modalTitle}}</h4>
2    <input type="text" v-model="testName" />

javascript
1modalCreate() {
2    axios.get(this.modalUrl, { params: { id: null } }).then(response => {
3        var html = response.data;
4        document.getElementById("modalDialog").textContent = null;
5        document.getElementById("modalDialog").innerHTML += html;
6
7        // 例
8        // document.getElementById("modalTitle").textContent = "新規登録";
9        // ↓
10        this.modalTitle = "新規登録";
11
12        $("#modalDialog").modal();
13    });
14},