Vueの異なるコンポーネント間にイベントのブリッジを構築する方法は？

ベストプラクティスは、Vuex State Managerと計算メソッド（ゲッター）およびウォッチャーを使用することです

jsfiddleで実際の例を作成しました。 https://jsfiddle.net/n4e_m16/wujafg5e/4/

vuexの仕組みの詳細については、こちらをご覧ください

さらにサポートが必要な場合はお知らせください:)

const store = new Vuex.Store({
  state: {
    mainMidLeftState: false,
  },
  getters: {
    mainMidLeftState: state => state.mainMidLeftState,
  },
  mutations: {
    toggleMainMidLeft: (state, payload) => {
      state.mainMidLeftState = !state.mainMidLeftState
    },
  },
})

Vue.component('main-mid-left', {
  data() {
    return {
    }
  },
  computed: {
    mainMidLeftState() {
      return this.$store.state.mainMidLeftState
    },
  },
  methods: {
    toggleMainMidLeft() {
      this.$store.commit('toggleMainMidLeft')
      //  alert(this.mainMidLeftState)
    },
  }
})
Vue.component('slide-left-top', {
  data() {
    return {
    }
  },
  computed: {
    mainMidLeftState() {
      return this.$store.state.mainMidLeftState
    },
  },
  watch: {
    mainMidLeftState: function(val) {
      alert("YES, computed property changed and alert have been triggered by watcher in slide top left component")
    }
  },
  methods: {
  }
})
const app = new Vue({
  el: '#app',
  store,
})

div {
  color: black;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app">
  <!-- inlining the template to make things easier to read - all of below is held on the component not the root -->
  <main-mid-left inline-template>
    <div>
      <h4>
        main mid left
      </h4>
      <button v-on:click="toggleMainMidLeft()">toggle Main Mid Left State</button>
      <div v-show="mainMidLeftState == true">State is true</div>
      <div v-show="mainMidLeftState == false">State is false</div>
    </div>

  </main-mid-left>
  <slide-left-top inline-template>
    <div>
      <h4>
        slide left top
      </h4>
      <div v-show="mainMidLeftState == true">State is true</div>
      <div v-show="mainMidLeftState == false">State is false</div>
    </div>
  </slide-left-top>
</div>

vuexを使用したくない場合は、イベントバスとして新しいVueインスタンスを作成できます（これはVueチュートリアルのどこかに記載されていると思います）。

const EventBus = new Vue()

EventBusを必要な場所にインポートすると、次の方法でイベントを送信できます。

EventBus.$emit('event-name', data)

そして、レシーバーコンポーネントのcreated（）に次のスクリプトを追加します。

EventBus.$on('event-name', ($event) => {
        // Do something
    })

これがお役に立てば幸いです| ´・ω・）ノ