javascript - vuejs2 を使用して別のコンポーネントから関数を実行する方法

Question

サイドバーが開いたときにイベントを収集する必要があるコンポーネントがあり、サイドバーを開く必要があるたびにこの関数を呼び出す必要があります。

例を次に示します。要素をクリックしてサイドバーを開き、mysiderbar がアラート関数を呼び出す関数を呼び出します。

しかし、私のコードはマウントされた関数フォーム vuejs から実行されています

これが私のサイドバーを呼び出す最初のファイルです

<template>
    <div>
        <p>Just a template</p>
    </div>
</template>

<script>
export default {
  name: 'home',
  data: function() {
      return {
          status: 'critical'
      }
  },
    mounted() {

        var openSidebar = function() {
            document.getElementsByClassName('side-bar')[0].style.display = 'block';
        };
        document.getElementById('box').addEventListener('click', openSidebar);
    },

}
</script>
<style>

</style>

ここに私の2番目のファイルがあります

<template>
   <div>
     <app-server-status></app-server-status>
     <div id="box">
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique laborum repellat nihil maxime et veniam sed, sequi minima, quasi ipsum enim.</p>
     </div>
     <div class="side-bar">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet sed autem non qui dolor minima. Incidunt eos recusandae doloribus hic nesciunt nostrum suscipit dolorum velit, voluptatum, accusamus, ullam fugiat!</div>
   </div>
</template>

<script>
//import local component server status
import ServerStatus from './ServerStatus.vue';

export default {
  name: 'home',
  components: {
      'app-server-status': ServerStatus
  },
  methods: {
        callAlert() {
                alert('TESTE')
            }
        },
  created() {
  },
  mounted() {
    function callAlert() {
      alert('Test');
    }

  },
}
</script>
<style>
  #box {
    background: red;
    width: 200px;
    height: auto;
    float: left;
  }
  .side-bar {
    position: absolute;
    width: 250px;
    height: 400px;
    right: 0;
    display: none;
    background: blue;
  }

</style>

サイドバーが開いたときに関数アラートを呼び出したいですか?