Prerender vue.js 2.0 component (similar to this. $ Compile in vue 1)

Question

I am trying to make reusable components for gridstack .

I cannot find an easy way to do something similar to the method this.$compilefrom vue 1 . I saw this example .

Here is my vue script:

export default {
  components: {
    'horizontal-fab': HorizontalFab,
    'd-widget': DWidget
  },
  data () {
    return {
  }
},
mounted () {
  var options = {
    cellHeight: 80,
    verticalMargin: 10,
    width: 3
  }
  $('#grid-stack').gridstack(options)
},

addWid () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},

addGraph () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(`
    <div class="grid-stack-item" data-gs-width="4">
      <div class="grid-stack-item-content">
        <p>HTML (added)</p>
      </div>
    </div>
  `, 0, 0, 1, 1, true)
}

And here is the corresponding html:

<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
  <d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>

The problem is this:

this method addGraphworks fine when addWidnot. Despite the fact that when pasted as a component directly into html, it works too.

I assume this is because the html from the component is not precompiled. However, it was resolved compilein vue1.

What I already tried:

• Mount, , , , ,
• , push, . Vue , , , gridstack . , .
• , standalone component, , , , .
• render functions, - , .

, - , , . , gridstack script, .

!

UPD: d-:

, Widget.vue

<template>
<div class="grid-stack-item" data-gs-width="4">
    <div class="grid-stack-item-content">
        <p>Wiiidget! (added)</p>
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

Answer 1

mount, , , grid.addWidget.

-, .

const MyWidget = Vue.extend(DWidget);

.

const mounted = new MyWidget().$mount();

$mount(), DOM. , mounted.$el. , addWidget.

grid.addWidget(mounted.$el, 0,0,1,1,true);

Answer 2

, @Bert mount. . addWid(), :

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}

, -!