javascript - why dynamically mounted vuejs content is not child component of root vue instance? -

i load html containing customized component, , mount content fixed node in parent component. unfortunately, found there no parent-child relationship between them, events dispatched dynamically inserted component can not received root vue. have created 1 fiddle, or proposal appreciated!. http://jsfiddle.net/matiascx/7ljygv81/1/

<div id="app">     <button v-on="click: addnewelement()">add custom element</button>      <br />     <div id="dynamicloaded"></div> </div> 

js:

new vue({     el: '#app',     data: {         sampleelement: '<div class="dynamic-child"><button v-on="click: test()">test</button></div>'      },     methods:{         addnewelement: function(){               var vmtemp = vue.extend({                             template: this.sampleelement,                             methods: {                              test: function(){                                alert("comes dynamically loaded content");                                this.$dispatch('child-msg','this comes ajax loaded component');                              }                             }                         });            new vmtemp().$mount(document.getelementbyid('dynamicloaded'));         },         test: function(){            alert('test');         },         events: {          'child-msg': function(msg){             console.log('message received'+msg);          }         }     } }); 

thanks vuejs creator's help, have tried async component approach, works , right parent-child relationship setup when after dynamic content rendered dom. https://github.com/vuejs/vue/issues/3255#issuecomment-231686976