Vue 组件之间的控制

Question

有2个组件，A组件和B组件，A组件中有一个播放器，并且添加了播放器的播放和停止事件，要求B组件的多个按钮点击也能让A组件的播放器播放，而且是每点击一个就会暂停上一个，立刻播放下一个

这个是A组件

 <img :src="start" alt="#" @click="changestart" class="seta">


 changestart() {      if (this.start == "../../static/pic/start.png") {        this.start = "../../static/pic/stop.png";        this.$refs.player.play();
      } else {        this.start = "../../static/pic/start.png";        this.$refs.player.pause();
      }

这个是b组件，也添加了click事件，还有其他功能
<li v-for="(songNamelist,songIndex) in songName" v-bind:key="songIndex" class="songlist" @click="songChoose(songIndex,'/play')">

    songChoose(songIndex,z) {      this.$router.replace(z)      this.isresearch = false;      this.ishow=false;      this.keyword='';
    },

有一个思路，因为用的是Vuex，点击B组件按钮用mutation提交修改state.xxx=true，A组件发现state的参数xxx=true然后执行播放，但是播放的函数不知道写在哪里

这是播放的函数
this.$refs.player.play()

写到created里面不行，因为A没有重新加载，写到A的methods里面不知道该用什么来触发，watch也试过，xxx不知道该在哪里设置为false，请给一个解决方法或一个思路，非常感谢。