const VueCompChild1 = {
  props: ['message'],
  template: `<h1>Hello {{ message }}</h1>`,
};

const VueCompChild2 = {
  props: ['inputValue'],
  methods: {
    handleInput($event) {
      this.$emit('input', $event.target.value);
    }
  },
  template: `<input type="text" v-bind:value="inputValue" v-on:input="handleInput($event)" />`,
}

const VueCompChild3 = {
  methods: {
    handleClick($event) {
      this.$emit('clickButton', $event);
    }
  },
  template: `<button v-on:click="handleClick('click')">button</button>`,
};

Vue.component('my-component', {
  data() {
    return {
      value: 'Vue',
      inputValue: '',
    };
  },
  methods: {
    handleClickButton($event) {
      console.log($event);
      this.value = this.inputValue;
      this.inputValue = '';
    },
  },
  components: {
    'vue-comp-child1': VueCompChild1,
    'vue-comp-child2': VueCompChild2,
    'vue-comp-child3': VueCompChild3,
  },
  template: `
    <div>
      <vue-comp-child1 v-bind:message="value"></vue-comp-child1>
      <vue-comp-child2 v-model="inputValue"></vue-comp-child2>
      <vue-comp-child3 v-on:clickButton="handleClickButton"></vue-comp-child3>
    </div>
  `,
});

new Vue({
  el: '#content',
});