Как вставить в DOM динамический компонент Vue, находящийся в полученном по xhr html?

Question

[DemetrioMoscow]

Всем привет!

Помогите, пожалуйста, разобраться с вопросом.
Дано: vue, laravel, webpack.
В resources/js/components лежат компоненты *.vue
в app.js компоненты подключены динамически:

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

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

webpack делит их на chunks, которые лежат в public/js/chunks/*.js

Задача:
По клику открывается модальное окно bootstrap, в которое по xhr загружается уже готовый html с сервера.
Внутри этого html содержится Vue-компонент, например:

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

Как его инициализировать?
Пытался сделать примерно так:
const ReviewComponentCtor = Vue.extend(ReviewComponent);
const vm = new ReviewComponentCtor({
propsData: {
//
}
}).$mount('#reviews');

но получаю ReviewComponent is not defined. Не понимаю как его достать из чанков вебпака.

Answer 1

[Aetae]

Правильный ответ: не грузить html с сервера. Серьёзно, это противоречит самой идее SPA. С сервера должны пилетать данные, хотя-бы как-то так:

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

а уже SPA разложит это всё на готовую разметку.

Вредный ответ: Vue.compile().

Answer 2

[Алексей Ярков]

Как насчёт документации?

Comments

[DemetrioMoscow]

Документация полдня перечитана насквозь, потому и решил спросить здесь..
По ссылке актуальный пример в случае размещения компонента, например, из шаблона, а не после динамической вставки кода. Когда DOM меняется vue не инициализирует новые компоненты, проблема в этом

[Александр]

"Когда DOM меняется vue не инициализирует новые компоненты"
вот именно, поэт ому надо их вручную инициалицировать
либо изменить подход
пересылать готовый html это не про vue, а про jquery

[Алексей Ярков]

DemetrioMoscow, Плохо прочитана значит. Откройте ссылку, почитайте до Управление состоянием загрузки, оберните в асинхронный компонент и используйте.