useSubscription return old value when router.push is used

[Jaroslaw Zabiello]

I have Vue2.7 with composition API, Vuetify 2 and Villus. This is SPA and I have a page content changed by the URL "id".

Step 1. I open the page1. It contains useSubscription and it returns correct data from GraphQL server.
Step 2. I move to page2 with Vue router push method. This time subscription is returning the last data (from page 1)
Step 3. I move to page3 with the same router push method. Now I can see the last data from page 2! The result is always one behind...

When I move between pages with hard page reload all works as excepted. When I do this with javascript and HTML Push method the graphql subscription always returns the data from the last call. I use policy: network-only.

Any hints?

[Jaroslaw Zabiello]

This was not Villus's issue. I got the same error in the Apollo client. The solution was to add a "key" prop to the component (<MyComponen :key="id"/>) which forced Vue to re-render the component. There is a great article about it https://michaelnthiessen.com/force-re-render/