RxJS and Vue

index.html

<div id="app">
  {{ message }}
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>

script.js

Rx.Observable.prototype.where = function (obj) {
  var me = this;
  return Rx.Observable.create(function (observer) {
    me.subscribe({
      next: function (v) {
        for (var key in obj) {
          if (v[key] !== obj[key]) {
            return;
          }
        }
          
        observer.next(v);
      },
      error: function (err) { observer.error(err) },
      complete: function () { observer.complete() }
    });
  });
}

var store = {
  message: 1
};

var subject = new Rx.Subject();
subject
  .where({ name: 'increment' })
  .subscribe({
    next: function (e) {
      store.message++;
    }
  });
subject
  .where({ name: 'decrement' })
  .subscribe({
    next: function (e) {
      store.message--;
    }
  });

var app = new Vue({
  el: '#app',
  data: store,
  methods: {
    increment: function () {
      subject.next({ name: 'increment' });
    },
    decrement: function () {
      subject.next({ name: 'decrement' });
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

http://reactivex.io/rxjs/manual/index.html
https://vuejs.org/v2/guide/instance.html

https://vuejs.org/v2/guide/components.html#X-Templates