[Vuejs]-Keep a DOM node/element alive in Vue.js

There is a built-in KeepAlive component that might do what you want? Though I’m not sure if it also caches the DOM nodes.

To keep alive the routes, You can add the <keep-alive> component as a wrapper of <router-view> and include the required route names which you want to cache.

In the below example, I am just using pdfview as a route name.

<keep-alive include="pdfview">
    <router-view></router-view>
</keep-alive>

Important Note : If You think that pdf will contains the static data then this approach is fine but if it will be containing dynamic or real time data then There is only disadvantage of using <keep-alive> as this component will be kept in memory and therefore their state is saved and not reset. You will loose lifecycle hooks like created, mounted, etc. since the component is not being rebuilt from scratch anymore.

Then you have to use the life cycle hooks of Cached Instances listed here.