javascript - How to call a vue component method from another js file -

i have vue v2.3.4 (quasar-framework v0.14.2) modal componenta working when clicking on button in same component. mymodal component seems work fine (as can trigger button). have code in separate util.js file should trigger modal (from 'myutilelement'). how can that?

componenta.vue

<template>   <div>     <div id='lotsofstuff'></div>     <mymodal ref="mymodal"></mymodal>   </div> </template>  <script> import mymodal '../mymodal.vue'  export default {   name: 'componenta',   components: {mymodal},   methods: {     openmodal: function () {       this.$refs.mymodal.open()     },     othermethods:...etc. } 

util.js

import componenta '../componenta.vue'  myutilelement.addeventlistener('click', triggermodal, false)  function triggermodal () {   componenta.methods.openmodal() } 

i following error in console:

uncaught typeerror: cannot read property 'openmodal' of undefined     @ htmlelement.triggermodal 

see non parent-child communication on docs. essentially, have 2 common options: event bus or centralized state management.
event bus simple pub-sub pattern:

var bus = new vue() // in component a's method bus.$emit('openmodal', params) // in component b's created hook bus.$on('openmodal', function(params) {   // ... }) 

the common centralized state management library vue vuex, analogous flux/redux/etc.