JSFiddle - React, Tailwind, and code Playground

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> 
    <button v-on="click: broadcastMsg()">broadcast message to children</button> 
    <br />
    <normalcomp></normalcomp>
    <div id="dynamicloaded"></div>
</div>

JavaScript

Vue.component('normalcomp',{
	template: '<div>this is a normal component</div>',
  events:{
			'fromparent': function(){
      console.log("received from parent!");
  		}
  }
});
new Vue({
    el: '#app',
    data: {
        sampleElement: '<div class="dynamic-child"><button v-on="click: test()">Test</button></div>'

    },
    methods:{
    		broadcastMsg: function(){
        	this.$root.$broadcast('fromparent','message from parent');
        },
        addNewElement: function(){



           var vmtemp = Vue.extend({
                            template: this.sampleElement,
                            methods: {
                             test: function(){
                               alert("comes from dynamically loaded content");
                               this.$dispatch('child-msg','this comes from ajax loaded component');
                               console.log("message dispatched");
                             }
                            },
                            events: {
                              'fromparent': function(){
                              console.log("received from parent!");
                              }
                            }
                        });
           var child = new vmtemp().$mount(document.getElementById('dynamicloaded'));
           child.$parent = this;
        },
        test: function(){
           alert('Test');
        },
        events: {
         'child-msg': function(msg){
            console.log('message received'+msg);
         }
        }
    }
});