为什么动态挂载的vuejs内容不是根vue实例的子组件？

Question

我加载了一些包含自定义组件的html，并将这些内容挂载到父组件中的固定节点。不幸的是，我发现它们之间没有父子关系，所以root vue不能接收由动态插入的组件发送的事件。我已经创建了一个小提琴，任何帮助或建议都是感激的！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 from dynamically loaded content");
                               this.$dispatch('child-msg','this comes from ajax loaded component');
                             }
                            }
                        });
           new vmtemp().$mount(document.getElementById('dynamicloaded'));
        },
        test: function(){
           alert('Test');
        },
        events: {
         'child-msg': function(msg){
            console.log('message received'+msg);
         }
        }
    }
});