Vue Router is duplicating entries in window.history in Safari - vue.js

Question

My App.vue has the following setup:
// App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
And Home.vue has link to Gmap.vue:
// Home.vue
<template>
<div>
<router-link to="/gmap">vue2-google-maps</router-link>
</div>
</template>
And Gmap.vue has <GmapMap> component from vue2-google-maps:
// Gmap.vue
<template>
<div>
<GmapMap :center="{lat: 0, lng: 0}" :zoom="10">
</GmapMap>
</div>
</template>
Finally router.js is like this:
export default new Router({
mode: "history",
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/gmap",
name: "gmap",
component: Gmap
}
]
})
In Safari, at path /, when click <router-link>, Safari navigates to /gmap and puts /gmap path into Safari's window.history. So clicking Safari's back button will make Safari navigate back to /.
Then clicking <router-link> again will make Safari navigate to /gmap. However, at this time Safari will put /gmap path into Safari's window.history twice (first /gmap and second /gmap). So clicking Safari's back button won't make Safari navigate to /. Instead, Safari will navigate to the first /gmap.
I confirmed that:
when Safari went back and forward between first /gmap and second /gmap, popstate event wasn't triggered, and Vue Router didn't catch the changes so none of Navigation Guards were invoked.
this happens in Safari (macOS 10.13.6 and iOS 11.4.1)
this doesn't happen if routing to components that don't contain <GmapMap> component
this doesn't happen when routing without Vue Router
this doesn't happen in Chrome 67 (macOS 10.13.6 and iOS 11.4.1)
Why does Safari put same path twice?

Answer 1

Though not an exact answer, to solve the issue wrap <keep-alive> around <router-view> in App.vue:
// App.vue
<template>
<div id="app">
<!-- Note that <router-view> is wrapped by <keep-alive> -->
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
Source: GitHub discussion.