title: How to destroy VueJS component in a method?
body: <p>I am having a VueJS application with a Tabs component, where user can open different tabs. Also I’m supporting user accounts, so each user can have his own tabs.</p>
  
  <p>But here is the catch: if I’m logged with one user, then I’m logging out and right after that I’m logging in with different user. For a second (or two) after the second user is logged, I’m then able to see the tabs which the previous user has and immediately they are overwritten with the tabs for the second user.</p>
  
  <p>So how I’m able to prevent this to happen? I assume this can be done on in a method when the “log out” button is clicked.</p>
  
  <p>To be more precise, what I’m having is a router and two pages (<code>LoginPage</code> and <code>MainPage</code>) and with logging out I’m redirected with the router to the <code>LoginPage</code>.</p>
  
  <pre><code>export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'MainPage',
        component: MainPage
      },
      {
        path: '/login',
        name: 'LoginPage',
        component: LoginPage,
      }
    ]
  }
  </code></pre>
  
  <p>Data in the <code>MainPage</code> comes on it’s create() and mounted() events and I assume that by forcing components to be recreated again will resolve my issue. Since this is not something that I want to save from user to user, instead it should have the effect of loading as when I’m visiting for the first time.</p>