在ViewModel之外调用Vue JS方法

Question

我想知道是否可以在其范围之外的实例内调用方法。为了清楚我的问题，我有以下设置：

HTML：

<header>
    ....
    <li class="main-navigation__item">
        <a href="#" v-on:click="showModal('login')" title="Inloggen" class="main-navigation__link">Inloggen</a>
    </li>
    ...
</header>

<div class="modal-container">
    <script type="x/template" id="modal-login">
        <div class="modal js-modal" v-show="show">
        ....
        </div>
    </script>
    <modal-login :show.sync="login"></modal-login>
</div>

JS：

// modals
Vue.component('modal-login', {
  template: '#modal-login',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true
    }
  }
});

// modal container
module.exports = new Vue({
  el:'.modal-container',
  data: {
    login: false,
    register: false,
    reset: false
    methods: {
        showModal: function(modal) {
        ...
});

使用Browserify的

main.js文件：

var modal = require('./modules/modal');

更具体地说，如何从头部内部调用方法'showModal'，因此在.modal-container实例之外？

如果所有内容都属于包含所有组件的包装器（'app'），或者这是一个正确的vue js方法，我在这里错过了什么吗？

编辑：

JSFiddle中用于演示的小例子： https://jsfiddle.net/9hkboajb/ 我想从标题中调用showModal方法。