I am working on a Laravel 5.7 application, that has a view with a Jarvis Widget [http://data.edwardsaquifer.org/widgets.php] inside of a VueJS component. However, I can't seem to get the Jarvis widget to function while wrapped within the Vue Component.
I have narrowed the issue down to the widget being wrapped inside of the Vue instance element.
new Vue({
el: '#prospectsApp'
});
When the jarvis widget is wrapped inside of the Vue element instance (#prospectsApp), is breaks all functionality of the widget.
<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>
However when I move the element instance inside of the widget content, the functionality works again...
<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>
Do I need to pass something into the Vue instance in order to keep the functionality of the widget intact?