VueJS组件内的Jarvis小部件

Question

我正在使用 Laravel 5.7 应用程序，该应用程序在 VueJS 内具有 Jarvis Widget [http://data.edwardsaquifer.org/widgets.php]]视图>组件。但是，当包裹在 Vue组件中时，我似乎无法使Jarvis小部件起作用。

我将问题缩小到包装在Vue实例元素内部的小部件。

new Vue({
    el: '#prospectsApp'
});

将 jarvis小部件包装在 Vue 元素实例（＃prospectsApp）中时，将中断该小部件的所有功能。 / p>

<div id="prospectsApp">
    <section id="widget-grid">
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
                <div class="jarviswidget jarviswidget-sortable" id="wid-id-0" role="widget">
                    <header class="ui-sortable-handle">
                        <div class="widget-header"> 
                            HEADER
                        </div>
                    </header>

                    <!-- widget div-->
                    <div role="content">
                        <!-- widget content -->
                        <div class="widget-body">
                            CONTENT
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </section>
</div>

但是，当我将元素实例移动到小部件内容中时，该功能再次起作用...

<section id="widget-grid">
    <div class="row">
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
            <div class="jarviswidget jarviswidget-sortable" id="wid-id-0" role="widget">
                <header class="ui-sortable-handle">
                    <div class="widget-header"> 
                        HEADER
                    </div>
                </header>

                <!-- widget div-->
                <div role="content">
                    <!-- widget content -->
                    <div class="widget-body">
                        <div id="prospectsApp">
                            CONTENT
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>

我是否需要将某些东西传递到Vue实例中以保持小部件的功能完整？