Vuejs: внедрить и загрузить vue компонент, только когда другой компонент отправляет событие

Question

Я работаю с Symfony> 4.2 и последней версией vuejs. Итак, у меня есть компонент, выставляющий разные фильтры (цена, размер .. блаблабла) и другой компонент, отображающий результаты продукта. То, что я хотел бы сделать, это сначала отобразить все продукты по умолчанию (фильтры не выбраны) с symfony / twig (чтобы я действительно мог видеть html в исходном коде мой навигатор) в # display-component div .

Затем, во-вторых, , как только пользователь меняет фильтр, компонент дисплея vue должен быть введен в # display-component и вступить во владение с этого момента (он может обновляться, удалить, добавить, что угодно ..). Но мне действительно нужен этот первый рендер с веткой.

Пример:

<div id="#display-component">
   <div class="product"> </div>
   <div class="product"> </div>
   <div class="product"> </div>
</div>

new Vue({
    el: '#display-component',
    components: {
        'DisplayComponent': DisplayComponent
    },
    template: '<DisplayComponent/>'
});

Я действительно не знаю, возможно ли это. Кажется, что если я перехватываю компонент отображения, я всегда теряю содержимое div, куда он вводится. Я не показываю код, потому что он долго тихий. Буду очень признателен за очень простое ПО C, если у кого-то есть решение!