const MockComponent = {
  render() {
    return this.$slots.default;
  },

  data() {
    return {
      status: '',
    };
  },

  watch: {
    status: {
      handler(newVal) {
        console.log('Status update: ' + newVal);
      },
      immediate: true,
    },
  },

  beforeCreate() {
    this.status = 'initializing';
  },
  mounted() {
    this.status = 'online';
  },
  beforeDestroy() {
    this.status = 'offline';
  },
};

new Vue({
  el: '#app',

  components: {
    MockComponent,
  },

  template: `
	<div>
  	<MockComponent v-if="showComponent" />
	</div>
  `,

  data() {
    return {
      showComponent: false,
    };
  },

  mounted() {
    this.showComponent = true;
    window.setTimeout(() => {
      this.showComponent = false;
    }, 1000);
  },
});