Render Component Via HTML in Vue JS

renderHTML.vue

<script>
// vue
import Vue from 'vue/dist/vue.esm';

// lodash
import unescape from 'lodash/unescape';

// component
import AppBaseParameterEditor from './AppBaseParameterEditor';

export default {
  components: { AppBaseParameterEditor },
  props: {
    dataHtml: {
      type: String,
      default: ''
    }
  },
  data() {
    return { templateRender: null };
  },
  computed: {
    htmlAppend() {
      return `<div id="preview-editor">${this.dataHtml}</div>`;
    }
  },
  watch: {
    dataHtml: {
      handler(val) {
        if (val) {
          this.updateRender();
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * @description for update render data & compile the data
     */
    updateRender() {
      const res = Vue.compile(unescape(this.htmlAppend));
      this.templateRender = res.render;

      // staticRenderFns belong into $options,
      // appearantly
      this.$options.staticRenderFns = [];

      // clean the cache of static elements
      // this is a cache with the results from the staticRenderFns
      this._staticTrees = [];

      // Fill it with the new staticRenderFns
      for (const i in res.staticRenderFns) {
        //staticRenderFns.push(res.staticRenderFns[i]);
        this.$options.staticRenderFns.push(res.staticRenderFns[i]);
      }
    }
  },

  /**
   * @description for render & create element
   */
  render(createElement) {
    if (!this.templateRender) {
      return createElement('div', 'loading...');
    } else {
      return this.templateRender();
    }
  }
};
</script>

<style scoped>
p {
  margin: 0;
}
</style>