How can i sync scroll event of two vue components in non parent-child relation?

Question

How can i sync scroll event of two vue component i a non-parent-child relation

Scrolling here ...

BaseLayout.vue

<script setup>
...
function logScrolling(event) {
  console.log("Scrolling to " + event.detail.currentY);
  // rightIonContent.value.$el.scrollToPoint(X, Y, 500); // this is not working
}
...
</script>

<template>
...
    <ion-content :scroll-events="true" @ionScroll="logScrolling($event)" >
      <slot />
    </ion-content>
...
</template>

should be synced with:

AppMenuRight.vue

<script setup>
function ScrollingToPoint(X, Y) {
  rightIonContent.value.$el.scrollToPoint(X, Y, 500);
}
</script>

<template>
...
    <ion-content :scroll-events="true" ref="rightIonContent">
    ...
    </ion-content>
...
</template>

Answer 1

BaseLayout should set scroll value in vuex store. Than Other component can watch that property and set element scroll value accordingly in the watcher

Answer 2

I have used the option with useEmitter.js described here: Vue.js 3 Event Bus

import { getCurrentInstance } from 'vue'

export default function useEmitter() {
    const internalInstance = getCurrentInstance(); 
    const emitter = internalInstance.appContext.config.globalProperties.emitter;

    return emitter;
}