scrollIntoView functionality broken after loading changing navigation (router-link)

Question

I have this little Ionic 6 Vue app which has two menu's - left and right.

    <IonSplitPane content-id="main-content">
      <ion-menu menuId="left-menu" side="start" content-id="main-content" type="push">
        <ion-content>
          <ion-menu-toggle menu="right-menu" autoHide="false">
            ...
          </ion-menu-toggle>
        </ion-content>
      </ion-menu>
      <ion-menu menuId="right-menu" side="end" contentId="main-content" type="overlay" :disabled="!bookHasChildren">
        <ion-content>
          <ion-menu-toggle menu="right-menu" autoHide="false">
            ... 
          </ion-menu-toggle>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content" ref="ionRouter"></ion-router-outlet>
    </IonSplitPane>

When selecting a book, the right menu lists sub-chapter-links. Scrolling to those sub-chapters in the main view is implemented with the [scrollIntoView][1] method.

function scrollToElement() {
  try {
    const elementToScrollTo = divs.value.find((element) => element.localName == scrollStore.scrollElementMain);
    if (elementToScrollTo != undefined && elementToScrollTo != elementToScrollTo.offsetTop) {
      // scrolling
      elementToScrollTo.scrollIntoView();
    }
  } catch (e) {
    // logging scrolling error
  }
}

This works fine until user clicks on left menu links where another books is loaded. No error logging, the scrollIntoView-functionality just doesn't work anymore.

I am not sure why this breaks the scrollIntoView functionality.

Have tried so many other options and approaches, but without any success.

Demo:

Code is on GitHub

PS: Cannot show in code sandbox as I am using Vue with script setup and I couldn't find a free code sandbox which supports this.