title: Vue2 - how to recreate component?
body: <p>How can I recreate a whole component after button click.</p>
  
  <p>Let say I'm in Component "UserPanel" and there is a button call "Refresh".
  When I click that button I would like to destroy component and create it from the scratch. I don't wont to use option like "vm.$forceUpdate()" because it doesn't help in my case.</p>
  
  <p>Is it any way to do it?</p>
  
  <p>My app code:</p>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="main-cont"&gt;
          &lt;NavBar&gt;&lt;/NavBar&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import NavBar from './components/TopBar/NavBar';
  import {mapActions,mapGetters} from 'vuex';
  import axios from 'axios';
  
      export default {
          name: 'App',
          components: {
              NavBar,
          },
          computed:{
              ...mapGetters(['isLoggedIn'])
          },
          methods:{
              ...mapActions(['loadLanguage','setToken','setUserLogged','loadUserProfile'])
          },
          created(){
              this.loadLanguage();
              this.setToken();
              let userLoggedIn = document.head.querySelector('meta[name="logged"]').content;
              if(userLoggedIn){
                  this.setUserLogged();
                  this.loadUserProfile();
              }
  
          }
  
      }
  
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      #main-cont{
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>main.js:</p>
  
  <pre><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import VueCookie from 'vue-cookie';
  import store from './store';
  import App from './App';
  
  
  //Components
  import Main from './components/main/Main';
  import UserRegister from './components/user/UserRegister';
  import ResetPassword from './components/user/ResetPassword';
  import UserEdit from './components/user/UserEdit';
  import UserView from './components/user/UserView.vue';
  import GameMain from './components/game/GameMain';
  import GamesList from './components/main/GameList';
  import Hall from './components/main/Hall';
  import Language from './components/main/Language';
  import GameCreate from './components/game/GameCreate';
  
  //Plugins
  import langPlugin from './langPlugin';
  import VTooltip from 'v-tooltip';
  
  Vue.use(VueRouter);
  Vue.use(VueCookie);
  Vue.use(langPlugin);
  
  export const router = new VueRouter({
      mode: 'history',
      routes: [
          {path: '/', component: Main},
          {path: '/user-register', component: UserRegister},
          {path: '/user-edit', component: UserEdit},
          {path: '/password-reset', component: ResetPassword},
          {path: '/user', component: UserView},
          {path: '/game', component: GameMain},
          {path: '/game-create', component: GameCreate},
          {path: '/games-list', component: GamesList},
          {path: '/hall-of-fame', component: Hall},
          {path: '/language', component: Language},
  
      ]
  });
  
  new Vue({
      router,
      store,
      render: h =&gt; h(App)
  }).$mount('#app');
  </code></pre>
  
  <p>Component to Reload.
  GameCreate:</p>
  
  <pre><code>&lt;Template&gt;
      &lt;div&gt;
          &lt;button @click="reloadThisComponent"&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/Template&gt;
  &lt;script&gt;
      export default{
          name: 'GameCreate',
          methods:{
              reloadThisComponent(){
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Thank you.</p>