VueJS + Phaser + DeepStream Client

main.js

import Vue from 'vue'
import App from './App'
import DeepStream from 'deepstream.io-client-js'

new Vue({
  ds: {
    connectionUrl: 'localhost:6020'
  },
  el: '#app',
  template: '<App/>',
  created () {
    this.ds = DeepStream("localhost:6020").login();
  },
  data () {
    return {
      deepStream: null
    }
  },
  components: {App}
})

phaser.vue

<template>
  <div id="gameScreen"></div>
</template>
<style>
  #gameScreen {
    margin: 0 auto;
  }

  #gameScreen canvas {
    display: block;
    margin: 0 auto;
  }
</style>
<script>
  import 'pixi'
  import 'p2'
  import 'phaser'
  export default{
    name: "phaser",
    props: {
      width: Number,
      height: Number
    },
    mounted () {
      let self = this;
      if (this.game == null) {
        this.game = new Phaser.Game(this.width, this.height, Phaser.AUTO, this.$el, {
          preload: function preload() {
            self.preload(this);
          },
          create: function create() {
            self.create(this);
          },
          update: function update() {
            self.update(this);
          }
        })
        this.colorRecord = this.$root.ds.record.getRecord('color');
        this.colorRecord.subscribe('color', function (value) {
          self.color = value;
        });
      }
    },
    methods: {
      preload() {
      },
      create(phaser) {
        let self = this;
        // If disableVisibilityChange is false, Phaser will stop update frame after Browser tabs lose focus.
        phaser.game.stage.disableVisibilityChange = true;
        phaser.game.stage.backgroundColor = this.color;
        phaser.input.onDown.add(function () {
          self.colorRecord.set('color', Phaser.Color.getRandomColor(50, 255, 255));
        }, this);
      },
      update(phaser) {
        phaser.game.stage.backgroundColor = this.color;
      }
    },
    destroyed() {
      this.game.destroy();
    },
    data(){
      return {
        game: null,
        color: null,
        colorRecord: null
      }
    },
    watch (val) {
      this.$nextTick(() => {
        // Besure update frame in every data change
        this.game.update()
      })
    }
  }
</script>