[Vuejs]-How do I use impersonation within a Vue.JS app

First, the reason that this is not working is because the change you made is stored in memory, which is erased when you navigate to a new page.

In order to make this work, you need to use some sort of persistent storage. You have a couple of options:

1. Store & load the impersonated user data with a cookie

   using vue-cookie

   this.$cookie.set('impersonation', { ... store whatever data you need }, 1);
   

   Check if you are impersonating a user when the page loads:

   mounted() {
     this.impersonation = this.$cookie.get('impersonation');
   }
   

2. Store the impersonated user data on the server

   This implementation depends entirely on your server stack. Most frameworks offer a session or cache that you could leverage.

3. Use Vuex for state management
   I’m expanding a bit on Vince’s answer above.
   First off, yes I have used impersonation in a Vue app successfully. As your app scales, which is likely given that you are working with hospitals (not sure if this is for a school project or real-world stuff), you will be accessing and mutating state from multiple locations. Vuex gives you the ability to separate state from the view, and allows mutation through actions. I would strongly suggest at least looking into it.