update to vue 3 scroolbar sync

[enlazoCtrl]

I'm trying to move 3 scrollbar at the same time from 3 charts with a component from scrollbar library but I need to update it to vue 3. I tried this approach but it doesn't work. Any idea on how I can achieve this? here is the scrollbar component also you can visit the same question in stakcoverflow :

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data: () => {
    return {
      topNode: null as any | null,
      uuid: 0
    }
  },
  beforeCreate(): void {
    this.$el.querySelector('input').innerHTML = '#scroll-sync-template'
    this.uuid += 1
  },
  mounted(): void {
    let parent = this.$parent

    while (parent) {
      this.topNode = parent
      parent = this.topNode.$parent
    }

    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const vue = this

    if (this.topNode) {
      this.topNode.$on('scroll-sync', function (data: any) {
        if (data.emitter === vue.uuid) {
          return
        }
        const { scrollTop, scrollHeight, clientHeight, barHeight } = data

        const scrollTopOffset = scrollHeight - clientHeight

        vue.$el.onscroll = null
        if (scrollTopOffset > barHeight) {
          vue.$el.scrollTop = scrollTop
        }
        window.requestAnimationFrame(() => {
          vue.$el.onscroll = vue.handleScroll
        })
      })
      this.$el.onscroll = this.handleScroll
    }
  },
  methods: {
    handleScroll: function (e: any) {
      // eslint-disable-next-line @typescript-eslint/no-this-alias
      const vue = this

      window.requestAnimationFrame(() => {
        const { scrollTop, scrollHeight, clientHeight, offsetHeight } = e.target

        if (this.topNode) {
          this.topNode.$emit('scroll-sync', {
            scrollTop,
            scrollHeight,
            clientHeight,
            barHeight: offsetHeight - clientHeight,
            emitter: vue.uuid
          })
        }
      })
    }
  }
})
</script>
<template>
  <div class="scroll-sync-container">
    <slot></slot>
  </div>
</template>
<style>
.scroll-sync-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: auto;
}
</style>

And I use it here (inside of another component):

<template>
  <v-container>
    <v-row class="text-center">
      <v-col class="text-md-center" cols="4">
        <h2>CPU</h2>
        <ScrolSync>
          <Bar :data="cpu" :options="options" />
        </ScrolSync>
      </v-col>
      <v-col class="text-md-center" cols="4">
        <h2>IO</h2>
        <ScrolSync>
          <Bar :data="io" :options="options" />
        </ScrolSync>
      </v-col>
      <v-col class="text-md-center" cols="4">
        <h2>SEC</h2>
        <ScrolSync>
          <Bar :data="sec" :options="options" />
        </ScrolSync>
      </v-col>

    </v-row>
  </v-container>
</template>