How to correctly initialize a Vue component after an element appears in the DOM?

Question

JavaScript

I have a page that has a button that opens a modal window.
The content of the modal window is loaded via AJAX and the content of the response (HTML) is inserted into the DOM.
This HTML contains some Vue components (comment component).
How to correctly instantiate this Vue component?

Current implementation

import Vue from "vue";
import Comments from "./components/comments.vue";
import {listenDomForElement} from "./../../common/helpers";

'use strict';

/** Variables */
let commentsBlockVm,
    vueElement = '#comments-block';

/** Комментарии */
commentsBlockVm = new Vue({
    name: 'comments-block',
    components: {Comments},
});

/** Специальный хелпер, слушающий DOM (MutationObserver) */
listenDomForElement(vueElement, function (element) {
    // Коллбэк исполнится, когда элемент появится в DOM
    // Маунтим Vue инстанс к нужному элементу
    commentsBlockVm.$mount(element);
    // Без этого компонент нормально не работает
    window.commentsBlockVm = commentsBlockVm;
});

export {commentsBlockVm}

DevTools is empty.

With the current implementation in Vue DevTools, I don't see this component, probably due to the fact that devtools is only initialized on page load.
How to solve this problem correctly or at least make devtools see this component?
Doki read, the only thing that is close to the solution is the life cycle hooks, but I'm not sure.
Thank you.

Answer 1

The problem was solved by including the JS file directly into the HTML, which arrives along with the content of the modal window.
Apparently, it should have been done right away, although it looks rude.