JSFiddle - React, Tailwind, and code Playground

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.15/vue.js"></script>
<div id="app">
    <button v-on="click: addNewElement()">Add custom Element</button> 
    <br />
    <div id="dynamicloaded"></div>
</div>

JavaScript

Vue.component('custel',{
template: '<div>this is the custel template content </div>'
})
new Vue({
    el: '#app',
    data: {
        sampleElement: '<div><button v-on="click: test()">Test</button><custel></custel></div>'
       
    },
    methods:{
        addNewElement: function(){
        
           
           
           var vmtemp = Vue.extend({
                            template: this.sampleElement,
                            methods: {
                              test: function(){
                               alert('this test comes from dynamically loaded live vue content');
                              }
                            }
                        });
           new vmtemp().$mount(document.getElementById('dynamicloaded'));
        },
        test: function(){
           alert('Test');
        }
    }
});