dynamical appended vuejs content: scope.test is not a function

Question

I am trying to find a workable solution for following scenario:

1. vuejs will render its "main" content first;
2. when some click happen, it loads some vuejs aware html(including both component referring and its data);
3. that dynamically loaded vuejs partial html should be compiled and inserted to a pre-defined node(mount point).

I am now trying to use the $mount functionality to give a try. You can have a check on this fiddle http://jsfiddle.net/matiascx/cd35khy8/ Also, i paste code here:

<div id="app">
  <button v-on="click: addNewElement()">Add custom Element</button> 
  <br />
  <div id="dynamicloaded"></div>
</div>

new Vue({
  el: '#app',
  data: {
    sampleElement: '<div><button v-on="click: test()">Test</button></div>'
  },
  methods:{
    addNewElement: function(){
      var vmtemp = Vue.extend({
                        template: this.sampleElement,
                        methods: {}
                   });
      new vmtemp().$mount(document.getElementById('dynamicloaded'));
    },
    test: function(){
       alert('Test');
    }
  }
});

The vuejs always complain:

VM1881:3 Uncaught TypeError: scope.test is not a function

I am wondering it is because wrong scope assigned to newly mounted content.

1. How to fix it? thanks to @gurghet, he has pointed out the issue is caused by new mounted 'component' can not access the test function which is in root scope.
2. Is that the proposed way to achieve that goal (dynamically compile and mounted count with right scope) Thanks to @gurghet, I bring up more practical questions about this ticket:
3. How let that test function defined within parent be available to that dynamically mounted component? 4. Why the dynamically mounted component has no child-parent relationship with root vue instance? How to let they have the parent-child relationship? Thanks~!

Answer 1

If you debug your application you will find that the method test is not present in the options. This is because is a method of the 'father'.

You should add the method test directly in the methods:{} of the dynamicloaded

http://jsfiddle.net/L25oqe5n/