VueJs Cache Issue Demo

by simplycorey

HTML

<div id="cache-demo">
  <cache-demo :component="component" v-if="component === 'first'"></cache-demo>
  <cache-demo :component="component" v-if="component === 'second'"></cache-demo>

  <button @click="component = 'first'">
    First
  </button>
  <button @click="component = 'second'">
    Second
  </button>
</div>

Vue

Vue.component('cache-demo', {
  props: {
    component: {
      type: String,
      required: true,
    }
  },
  mounted() {
    alert('Mounted!');
  },
  template: '<div>Loaded: {{ component }}</div>'
})

new Vue({ 
	el: '#cache-demo',
  data: {
  	component: 'first',
  }
});