vue component lifecycle question

by ekeydar

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button @click="show1=!show1">
    Toggle  
  </button>
  <div v-if="show1">
    <my-comp title="comp1"/>
  </div>
  <div v-if="!show1">
    <my-comp title="comp2"/>
  </div>
</div>

JavaScript

Vue.component('my-comp', {
	props: ['title'],
  template: '<h1>{{title}}</h1>',
  created: function() {
  	console.log('my-comp.created title='+ this.title);
  },
  destroyed: function()  {
  	console.log('my-comp.destroyed title='+ this.title);
  }
}),

new Vue({
  el: '#app',
  data: {
    show1: true,
  },
})