Update vue2 option API component to vue 3

I need to update a component from vue 2-javascript to vue 3 typescript any approach on how can I achieve this?, I watched many tutorials but it seems its more complex than I thought, here is the code:

<script lang="ts">
export default{
let uuid = 0;
this.$el.querySelector("input").innerHTML = "#scroll-sync-template"
data() {
return {
topNode: null
}
},
beforeCreate() {
this.uuid = uuid.toString();
uuid += 1;
},
mounted() {
let parent = this.$parent
while (parent) {
this.topNode = parent
parent = this.topNode.$parent
}
const vue = this;
this.topNode.$on('scroll-sync', function(data) {
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) {
const vue = this
window.requestAnimationFrame(() => {
const {
scrollTop,
scrollHeight,
clientHeight,
offsetHeight
} = e.target
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>

I tried to update a vue 2 in javascript document but it result in a locked road, I added the template part as the style tag.

I tried to do it but I thinks it's not gonna work on the '$on' :

<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>

You can still type your topNode if you want with 'ComponentPublicInstance' from 'vue' but you will have an error on the $on. Maybe the solution is to use addEventListener or a substitute.

If you want to migrate to Composition API don't hesitate to ask, and i think it could solve some problems

Hope it helps you !