How to re-mount a component in VueJS?

Question

I have a component which is mounted as part of the DOM rendering. The skeleton of the application is

  
    &         


        

Answer 1

The trick is to alter the key

When the key changes, vue regards it as a new component, so it will unmount the "old" component, and mount a "new" component.

See example, the created() hook will only run once, so if you see the value change, you're seeing a brand new object.

example:

Vue.component('my-component', {
  template: `<div>{{ rand }}</div>`,
  data() {
    return {
      rand: ''
    }
  },
  created() {
    this.rand = Math.round(Math.random() * 1000)
  }
});

new Vue({
  el: '#app',
  data: {
    componentKey:0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>

<div id="app">
  <my-component :key="componentKey"></my-component>
  <button @click="componentKey=!componentKey">press this button to reload the component</button>
</div>