Vue js Instance lifecycle

The image comes from Udemy Vue js 2 course

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<div id="app" class="text-center">
	<h1> {{ title }} </h1>
	<button @click=" title = 'vue js 2 changed'">	Update</button>
	<button @click="destroy">Destroy</button>
</div>

<script type="text/javascript">
	new Vue({
	  el: '#app',
	  data: {
	  	title: 'vue js'
	  },
	  beforeCreate: function(){
	  	console.log('beforeCreate()');
	  },
	  created: function(){
	  	console.log('Created()');
	  },
	  beforeMount: function(){
	  	console.log('beforeMount()');
	  },
	  mounted: function(){
	  	console.log('mounted()');
	  },
	  beforeUpdated: function(){
	  	console.log('beforeUpdated()');
	  },
	  updated: function(){
	  	console.log('updated()');
	  },	  
	  beforeDestroy: function(){
	  	console.log('beforeDestroy()');
	  },
	  destroyed: function(){
	  	console.log('destroyed()');
	  },
	  methods: {
	  	destroy: function(){
	  		this.$destroy();
	  	}
	  }	  
	})

</script>

We have to open console to realize the vue instance life cycle.
Demo : http://vue.toihid.com/section-5/vue-instance-lifecycle.php