var mixin = {
  template: `
    <div :style="style">{{$options.name}} count: {{count}}
      <button
        @click="count++"
      >+1 for child</button>
      <button
        @click="$destroy()"
      >destroy child</button>
    </div>`,
  data() {
    return {
      count: 0,
      style: "background-color: pink;"
    };
  },
  props: ['parentCount'],
  watch: {
    parentCount(val) {
      this.count = val;
    }
  },
  beforeCreate() {
    console.log(`${this.$options.name} beforeCreate`);
  },
  created() {
    console.log(`${this.$options.name} create`);
  },
  beforeMount() {
    console.log(`${this.$options.name} beforeMount`);
  },
  mounted() {
    console.log(`${this.$options.name} mounted`);
  },
  beforeUpdate() {
    console.log(`${this.$options.name} beforeUpdate`);
  },
  updated() {
    console.log(`${this.$options.name} updated`);
  },
  beforeDestroy() {
    console.log(`${this.$options.name} beforeDestroy`);
  },
  destroyed() {
    console.log(`${this.$options.name} destroyed`);
  }
};

Vue.component("child-component", {
  mixins: [mixin],
});
Vue.component("child-two-component", {
  mixins: [mixin],
  data() {
    return {
      style: "background-color: yellow"
    };
  }
});
Vue.component("child-three-component", {
  mixins: [mixin],
  data() {
    return {
      style: "background-color: gray"
    };
  }
});

var vm = new Vue({
  el: "#app",
  data: {
    count: 0,
    parentCount: 0
  },
  beforeCreate() {
    console.log("root beforeCreate");
  },
  created() {
    console.log("root create");
  },
  beforeMount() {
    console.log("root beforeMount");
  },
  mounted() {
    console.log("root mounted");
  },
  beforeUpdate() {
    console.log("root beforeUpdate");
  },
  updated() {
    console.log("root updated");
  },
  beforeDestroy() {
    console.log("root beforeDestroy");
  },
  destroyed() {
    console.log("root destroyed");
  },
  methods: {
    sync() {
      this.$refs.childComponent.count = this.count;
    }
  }
});