IonContent scrollToTop function not working when I change the route - vue.js

Question

I'm using ionic-vue to create a mobile app.
IonContent scrollToTop function is not working when I switch routes.
such as:
http://localhost:8100/tabs/q/s/20 -> http://localhost:8100/tabs/q/s/21
Details:
On the original page, when I click the scrollToTop button, it works fine. But if I go forward a link or backwards a link and then click the scrollToTop button, it doesn't work. However, if I go back to the original link, then the scrollToTop button works.
I don't understand why it's acting this way.
This is the code for the button (ScrollToTopButton.vue):
<template>
<div id="myBtn">
<ion-button #click="scrollToTop">
<ion-icon :icon="arrowUpCircleOutline" color="success"></ion-icon>
</ion-button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { IonButton, IonIcon } from '#ionic/vue'
import { arrowUpCircleOutline } from 'ionicons/icons';
export default defineComponent({
components: {
IonButton,
IonIcon,
},
setup () {
const scrollToTop = () => {
let scrollContent = document.querySelector('ion-content')!;
console.log(scrollContent)
//scrollContent.scrollToTop(500);
console.log(scrollContent.scrollToTop(600))
}
return { arrowUpCircleOutline, scrollToTop };
}
})
</script>
Here is the code for IonContent (in TabLayout.vue):
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<slot name="actions-start"></slot>
<ion-back-button :default-href="pageDefaultBackLink" v-if="pageDefaultBackLink !== ''"></ion-back-button>
</ion-buttons>
<ion-title>
<div class="ion-text-wrap pageTitle">
{{title}}
</div>
</ion-title>
<ion-buttons slot="end">
<slot name="actions-end"></slot>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="bindingScrollContent" :scroll-events="true">
<slot/>
</ion-content>
</ion-page>
</template>
This is the code where I use the ScrollToTop button inside of the IonContent (in Surah.vue):
<template>
<TabLayout :title="title" pageDefaultBackLink=''>
...
<template v-slot:actions-end>
<ScrollToTopButton/>
</template>
<SurahContainer :surah="cur_surah"/>
</TabLayout>
</template>
I tried many things but it's hard to debug this since the console log statements for data from the button doesn't change even on different routes.
Any idea or help would be awesome.

Answer 1

add the two lines as a comment to solve the problem
const ScrollToBottom = () => {
let scrollContent = document.querySelector('ion-content');
// eslint-disable-next-line #typescript-eslint/ban-ts-comment
//#ts-ignore
scrollContent.scrollToTop(400);
};