JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-alpha.6/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
    <div class="container">
      <h1>Gem Market</h1>
      <hr>
      <cart></cart>
      <hr>
      <div>
        <h3>You have to pay <strong>{{ gold }}</strong> pieces of gold.</h3>
      </div>
    </div>

  <template id="cart-template">
    <div>
      <h2>How many gems would you like to buy?</h2>
      <p>1 emerald costs 100 pieces of gold.</p>
      <input v-model="quantity" class="form-control" number>
    </div>
  </template>
</body>

JavaScript

var bus = new Vue()

Vue.component('cart', {
  template: "#cart-template",
  data () {
    return {quantity : 0 }
  },
  watch: {
    'quantity': function (quantity, oldQuantity) {
      console.log('quantity changed from %s to %s', oldQuantity, quantity)

      bus.$emit('quantity-changed', quantity)
    }
  }
});

new Vue({
  el: '.container',
  data : function () {
    return {
      quantity: 500
    };
  },
  created: function () {
    // store this to use with Vue.set
    var temp = this;
    // on number event set data
    bus.$on('quantity-changed', function (quantity) {
      // vm.$set deprecated
      Vue.set(temp, 'quantity', quantity)
    })
  },
  computed:{
    gold: function(){
      return this.quantity * 100
    }
  }
})