var bus = new Vue({});

Vue.component("invoice-summary", {
  props: ['amount', 'taxes'],
  template: `
    <p>
      Amount: {{ amount }} <br />
      Taxes: {{ taxes }}
    </p>
  `
});

Vue.component("p-item", {
  props: ['name'],
  data: function () {
    return {
      value: 1500
    }
  },
  template: `
    <div>
      {{ name }}
      <input type="number"
        v-model.number="value" step="100" />
    </div>
  `,
  computed: {
    tax: function() {
      return this.value * 0.2;
    }
  },
  watch: {
    value: function() {
      bus.$emit('value-changed', this.value, this.tax);
    }
  },
  created: function() {
    bus.$emit('value-changed', this.value, this.tax);
  }
});

var vue = new Vue({
  el: "#app",
  data: {
    totalAmount: 0,
    totalTaxes: 0
  },
  methods: {
    updateTotals: function(val, tax) {
      this.totalAmount = val;
      this.totalTaxes = tax;
    }
  },
  created: function() {
    bus.$on('value-changed', this.updateTotals);
  }
});