How to use the vue.compile function in vue

it('should be able to bind scroll function', async () => {
    const res = Vue.compile('<div></div>')
    const vm = new Vue({
      data () {
        return {
          msg: 'hello'
        }
      },
      directives: {scroll},
      methods: {
        onScroll () {
          // TODO
        }
      },
      render: res.render,
      staticRenderFns: res.staticRenderFns
    })
    vm.$mount()

it('directive with invalid modifiers should be ok', async () => {
    // invalid modifier should be ok
    const res = Vue.compile('')
    const vm = new Vue({
      data () {
        return {
          msg: 'title'
        }
      },
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    await vm.$nextTick()
    const trigger = vm.$el
    utils.triggerEvent(trigger, 'click')
    await utils.sleep(300)
    const tooltip = document.querySelector('.tooltip')
    expect(tooltip).to.exist
    expect(tooltip.querySelector('.tooltip-inner').innerText).to.equal('title')

it('should be able to change enable in runtime', async () => {
    const res = Vue.compile('123')
    const vm = new Vue({
      data () {
        return {
          msg: 'text',
          enable: true
        }
      },
      components: {Tooltip},
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    const $el = $(vm.$el).appendTo('body')
    expect(document.querySelectorAll('.tooltip').length).to.equal(0)
    await vm.$nextTick()
    const trigger = vm.$el.querySelector('button')
    utils.triggerEvent(trigger, 'click')

it('should be able to render with no content', async () => {
    const res = Vue.compile('')
    const vm = new Vue({
      data () {
        return {
          msg: 'hello'
        }
      },
      components: {Tooltip},
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    const $el = $(vm.$el)
    $el.appendTo('body')
    await vm.$nextTick()
    $el.remove()
    vm.$destroy()
  })

it('should be able to add String `customNavClass`', () => {
    const res = Vue.compile('123')
    const vm = new Vue({
      components: {Tab, Tabs},
      render: res.render,
      staticRenderFns: res.staticRenderFns
    })
    vm.$mount()
    expect(vm.$el.querySelector('.nav.nav-tabs').className).to.contain('custom-nav-class')
    $(vm.$el).remove()
    vm.$destroy()
  })

it('should not close dropdown on self click if not-close-elements contains component ref and with append-to-body', async () => {
    const res = Vue.compile('<button type="button" class="btn btn-default dropdown-toggle"><span>Dropdown 1</span><span class="caret"></span></button><template slot="dropdown"><li><a href="#">Action</a></li></template>')
    const vm = new Vue({
      data () {
        return {
          show: true,
          eles: []
        }
      },
      mounted () {
        this.eles.push(this.$el)
      },
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    await vm.$nextTick()
    const dropdown = vm.$el
    expect(dropdown.tagName.toLowerCase()).to.equal('div')

it('should render nothing if no children and items', async () => {
    const res = Vue.compile('')
    const _vm = new Vue({
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    const $breadcrumb = $(_vm.$el)
    await _vm.$nextTick()
    expect($breadcrumb.children().length).to.equal(0)
    _vm.$destroy()
  })
})

it('should be able to work with v-model', async () => {
    const res = Vue.compile('12')
    const _vm = new Vue({
      data () {
        return {
          index: 1
        }
      },
      components: {Carousel, Slide},
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount()
    $el = $(_vm.$el)
    await _vm.$nextTick()
    expect($el.find('.carousel-inner .item.active').length).to.equal(1)
    expect($el.find('.carousel-inner .item').get(1).className).to.contain('active')
    utils.triggerEvent($el.find('.carousel-control.right').get(0), 'click')
    await utils.sleep(700)

getDynamicHTML: function (input) {
                var _staticRenderFns;
                const { render, staticRenderFns } = Vue.compile(input);

                if (this.$options.staticRenderFns.length > 0) {
                    _staticRenderFns = this.$options.staticRenderFns;
                } else {
                    _staticRenderFns = this.$options.staticRenderFns = staticRenderFns;
                }

                try {
                    var output = render.call(this, this.$createElement);
                } catch (exception) {
                    console.log(this.__('error.something_went_wrong'));
                }

                this.$options.staticRenderFns = _staticRenderFns;

                return output;

compile(element) {
      return Vue.compile(element);
    },
    setAllButtonsStates(collectionContainer) {