Calling a Vue.Js component method from outside

If you are trying to integrate an already existing page to a view component you might want to call the component from the existing page. To refer a method that belongs to one of the child components of the main Vue instance you can use Vue’s ref directive.

var vm = new Vue({

    el: '#app',

    components: {‘my-Component’: myComponent}

});


<my-Component ref="p">hello</my-Component>
<!--<child-component ref="child"></child-component>-->

<script>

vm.$refs.p.mymethod ();

</script>

After executing this code there will be a 'vm is undefined' error if you are using web pack because of the way it scopes the modules so add window.app=vm in main.js.