How to destroy a VueJS component that is being cached by

Question

I have a Vue component that\'s kept alive using Vue\'s element for caching purposes. However, the problem I am having right now is that once I sign out of one account and c

Answer 1

If your problem is that the component is still holding the old user's data, the only option is resetting it with an internal reset function, which reloads the data for the new user one way or another.

See: http://jsfiddle.net/paolomioni/hayskdy8/

var Home = Vue.component('Home', {
  template: `
{{ title }}
  
  
`,
  data: () => {
    return {
      title: 'BBB'
    }
  },
  methods: {
    reset() {
      this.title = 'BBB'
    }
  }
});

In the fiddle, click on the button "change text" to change the text: if you click the checkbox twice to switch view and back again, you will see that the number you've generated is still kept in memory. If you click on the "reset" button, it will be reset to its initial state. You need to implement the reset method on your component and call it programmaticaly when the user logs out or when the new user logs in.