Basic VueJs Component

Defining and using a component - http://coligo.io

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <counters :counter1="counter1" :counter2="counter2">
  </counters>
  <button @click="onClick">Click Here</button>
</div>

JavaScript

Vue.component('counters', {
  //template: '<h1>{{counter1.count}} {{counter2.count}}</h1>',
  template: '<h1>{{count1}} {{count2}}</h1>',
  props: {
    'counter1': {
      type: Object
    },
    'counter2': {
      type: Object
    }
  },
  data: function() {
    return {
      'count1': 0,
      'count2': 0,
    }
  },
  watch: {
    counter1: {
      handler: function(n, o) {
        console.log(JSON.stringify(n));
        this.count1 = n.count;
      },
      deep: true  
    },
    counter2: {
      handler: function(n, o) {
        console.log(JSON.stringify(n));
        this.count2 = n.count;
      },
      deep: true
    }
  }
});

// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data: {
    counter1: {
      count: 0
    },
    counter2: {
      count: 0
    }
  },
  methods: {
    onClick: function() {
      this.counter1.count++;
      this.counter2.count++;
      
    }
  }
});