Call a Vue.js component method from outside the component

In the end I opted for using Vue's ref directive. This allows a component to be referenced from the parent for direct access.

E.g.

Have a compenent registered on my parent instance:

var vm = new Vue({    el: '#app',    components: { 'my-component': myComponent }});

Render the component in template/html with a reference:

<my-component ref="foo"></my-component>

Now, elsewhere I can access the component externally

<script>vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method</script>

See this fiddle for an example: https://jsfiddle.net/xmqgnbu3/1/

(old example using Vue 1: https://jsfiddle.net/6v7y6msr/)

You can set ref for child components then in parent can call via $refs:

Add ref to child component:

<my-component ref="childref"></my-component>

Add click event to parent:

<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>

var vm = new Vue({  el: '#app',  components: {    'my-component': {       template: '#my-template',      data: function() {        return {          count: 1,        };      },      methods: {        increaseCount: function() {          this.count++;        }      }    },  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">    <my-component ref="childref"></my-component>  <button id="external-button" @click="$refs.childref.increaseCount()">External Button</button></div>  <template id="my-template">  <div style="border: 1px solid; padding: 2px;" ref="childref">    <p>A counter: {{ count }}</p>    <button @click="increaseCount">Internal Button</button>  </div></template>