How to prevent component from being destroyed when transitioning between routes?

Question

Vue.js

Hello.
A simple example describing the problem:
A timer starts on one router component, but when you switch to another router, the timer is destroyed and when you switch to this page again, it starts again.
How to avoid this situation? Let's say I want to display this timer (or other real-time data) on the main page, or let's say there is a request to the server api and processing this response, it turns out that with each transition to the page, the component will be created anew, data will be recalculated, etc. everytime? Is it possible to create a component on a page and not destroy it when moving to another page?

Answer 1

To keep components in memory, Vue has . But, I think, this is not what you need, but you need a component-independent storage. You can use Vuex for this, or you can get away with a simple reactive object: in Vue 2 you can get one with , in Vue 3 just with . <keep-alive>
Vue.observableVue.ractive