I'm using this plugin https://www.npmjs.com/package/vue-youtube-embed to create two videos on a page in a vue app I am building. What I am trying to do is when playing one video pause the other. I was able to achieve this if the videos are in the same component using refs. My problem is each of the videos is nested inside a component and then placed on a parent page. Is there a way to have the same functionality but called from the parent? or a sibling communication?

I think this is more of a question of can you access a sibling components $ref? or is there a better approach possibly using store?

Same Component: (works as expected)

<div>
  <div class="l-text-image-band-media">
    <youtube 
      video-id="0mS0uT_wrhg" 
      @playing="stopOtherVideo('player2')" 
      ref="player1"
    ></youtube>
  </div>
  <div class="l-text-image-band-media">
    <youtube 
      video-id="0md0uT_wg7g" 
      @playing="stopOtherVideo('player1')" 
      ref="player2"
    ></youtube>
  </div>
</div>

methods: {
  stopOtherVideos(target) {
    this.$refs[target].player.stopVideo();
  },
}

Parent: (each component with videos nested in each)

<template>
  <div>
    <main class="main-content" id="main-content" tabindex="-1">
      <ResponsibilityByTheNumbers 
        is-video-component="true" 
        :text="handsOnText" 
      />   
      <ResponsibilityWhiteBandLeftText 
        is-video-component="true" 
        :showPrism="showPrism"
        :text="stemVideoBandText" 
      />
    </main>
  </div>
</template>

Video Component (only showing one) does not work

<youtube 
      video-id="0md0uT_wg7g" 
      @playing="stopOtherVideo('player1')" 
      ref="player2"
    ></youtube>

methods: {
  stopOtherVideos(target) {
    this.$refs[target].player.stopVideo();
  },
}