Sharing Reactive data between Multiple Vue Instances

Without using Vuex How you can share reactive data between multiple instaces of Vuejs using Mixin. It will host the Data in a seperate Vue Instance ,

Main.js

let globalData = new Vue({
  data: { $color: 'green' }
});
Vue.mixin({
  computed: {
    $color: {
      get: function () { return globalData.$data.$color },
      set: function (newColor) { globalData.$data.$color = newColor; }
    }
  }
})

// this.$color will be available in all Vue instances...
new Vue({
  el: '#app1'
})
new Vue({
  el: '#app2'
})
// ...and components
Vue.component('my-comp', {template: '#t3'});
new Vue({
  el: '#app3',
})

App1.vue
<template>
<div id="app1">Color: {{ $color }} <button @click="$color = 'red'">change to red</button></div>
</template

App2.vue

<template>
<div id="app2">Color: {{ $color }} <button @click="$color = 'yellow'">change to yellow</button></div>
</template>