Vue Playground

Application with Vue.js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="incrementer">
</div>
<div id="counter">
</div>

JavaScript

// Vue instance used as bus
var bus = new Vue({
  methods: {
    increment() {
      this.counter++;
    }
  },
  data: function() {
    return {
      counter: 1
    };
  }
});

// Button that increments
var button = new Vue({
  el: "#incrementer",
  template: "<button @click='increment'>Increment</button>",
  bus: bus,
  data: function() {
  	return {
    	
    };
  },
  methods: {
    increment: function() {
      this.$bus.increment();
    }
  }
});

// Counter observing bus
var counter = new Vue({
  el: "#counter",
  template: "<div>{{counter}}</div>",
  bus:bus,
  data: function() {
  	return {
    	
    };
  },
  computed: {
    counter: function() {
      return this.$bus.counter;
    }
  }
});