Overriding Vue Router for showing multiple modals in a stack

I have a Nuxt 2 application where I am trying to achieve a more native application experience.

I am utilising modals to ensure that the user can quickly navigate the app and go back to where they were previously.

I am having some difficulties with handling multiple modals in a "Navigation Stack" manner as I need to be able to push the new URL to the browser and allow the user to utilise the browsers back button (specifically in mobile OS, Android or iOS) but also the in app navigation.

Currently I am attempting to use the beforeRouteLeave method to intercept the Vue Router and show the Modal plus update the URL using window.history.pushState this works fine for a single modal, but when I need to add a second modal on top and the user uses the browsers back button, the Vue Router kicks in and navigates back to the index and bypasses my own navigation stack array.

I need a way to keep track of the users movements and then overlay the modals like a mobile app does.

Here is a pen showing my current implementation:

https://codesandbox.io/p/sandbox/elastic-ganguly-zu7jlv

Example of what I wish to achieve:

from Overriding Vue Router for showing multiple modals in a stack