How to insert a dynamic Vue component into the DOM that is in the html received by xhr?

Question

Vue.js

Hello!

Help, please, deal with the issue.
Given: vue, laravel, webpack.
In resources/js/components are *.vue
components in app.js components are connected dynamically:

const ReviewComponent = () => import(/* webpackChunkName: "review-component" */ './components/ReviewComponent.vue');

const app = new Vue({
    el: '#app',
    components: {
        ReviewComponent
    }
});

webpack divides them into chunks, which are in public/js/chunks/*.js

Task:
On click, a bootstrap modal window opens, into which ready-made html from the server is loaded by xhr.
Inside this html is a Vue component like so:

<div> ... <review-component></review-component> ... </div>

How to initialize it?
Tried to do something like this:
const ReviewComponentCtor = Vue.extend(ReviewComponent);
const vm = new ReviewComponentCtor({
propsData: {
//
}
}).$mount('#reviews');

but I get ReviewComponent is not defined. I don't understand how to get it from webpack chunks.

Answer 1

Correct answer: don't load html from the server. Seriously, this goes against the very idea of ​​a SPA. Data should be sent from the server, at least something like this:

{ 
  infoBlock: [{
    type: 'text',
    value: '...'
  },{
    type: 'component',
    value: 'review'
  },{
    type: 'text',
    value: '...'
  }]
}

and already SPA will decompose it all into ready-made markup.
Harmful answer: Vue.compile ().

Answer 2

How about documentation ?