Vuejs：仅在另一个组件发出事件时才注入和加载Vue组件

Question

我正在使用Symfony> 4.2和最新版的vuejs。 因此，我有一个组件展示不同的过滤器（价格，大小.. blablabla），另一个组件显示产品结果。我想做的是首先显示所有产品，默认情况下（未选择过滤器）带有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的内容。我没有显示代码，因为它很安静。如果有人有解决方案，我将非常感谢一个非常简单的POC！