Vue and Complex Objects

I have an object in my application which is constructed from a class, such as follows:

class Game {
  board: Board
  players: Set<Player>
  ...
}

My intention is to somehow build an interface between Vue and this class. I don’t want to normalize the classes or be restricted by Vue’s reactivity. I want to call methods of this class from my Vue components, but also to be notified when they have changed.

I’m not using Vuex either. I’m doing a small interactive app and think Vuex is too over-kill.

My way of doing things right now is as follows:

Store

import Game from "@/Game"

export default {
  game: Game,
  gameUpdate: 0,

  setGameField(field) {
    game.deep.complex.object.setField(field)
    this.gameUpdate++
  }
}

Vue Component

import store from "@/store"

export default {
  data() {
    return { store }
  },
  computed: {
    gameUpdate: () => store.gameUpdate
  },
  watch: { 
    gameUpdate: () => console.log("Game updated!")
  },
  created() { store.setGameField(123); }
}

If my game was completely normalized and reactive, I could do well with Vue’s reactivity.
But when I don’t want to be restricted by the objects I want to use (or I want to use objects which have nothing to do with Vue), what is the best way to use Vue?

If don’t want Vue to make your object reactive, you can use wrapper like this:

//non-reactive object
user = {
    name:'John',
    email:'john@some.com'
}

wrappedNonReactive = new Vue({
    data : {
        triggers:{
            name:0,
            email:0
        }
    },
    computed:{
        name(){
            this.triggers.name;
            return user.name;
        },
        email(){
            this.triggers.email;
            return user.email;
        },
        user(){
            // this will work as regular computed
            // tricks are not required here 
            return {name:this.name, email:this.email}
        }
    },
    methods:{
        dirty(prop){
            // suppose that the trigger will never be changed exactly 1<<30 times between render loops
            this.triggers[prop] = (this.triggers[prop] + 1) % 1073741824
        },
        setName(name){
            user.name = name;
            dirty('name');
        },
        setEmail(email){
            user.email = email;
            dirty('email');
        }
    }
})

of course, you can use one trigger for several properties, just keep in mind, that trigger change causes recomputation of all computed where it is touched (Vue is pretty smart, so it happens only once between render loops!)