vue-js-data-reactivity.js

import Vue from 'vue'
import {DataStore, Record} from 'js-data'


// define a base class that enables property-level vue reactivity.
export class VueReactiveRecord extends Record {
  constructor (...args) {
    // among other things, this will apply js-data schema if configured to do so; be sure to do `track: true`
    super(...args) 
    
    // apply vue reactivity
    for (let key in this) {
      Vue.util.defineReactive(this, key, this[key])
    }
    
    // re-apply js-data schema
    this._mapper().schema.apply(this)
  }
}

// create a record class which inherits this
export class User extends VueReactiveRecord {}

export const store = new DataStore()

// finally, create a mapper (if going this route)
export const userMapper = store.defineMapper('user', {
  idAttribute: 'id',
  endpoint: 'users',
  recordClass: User,
  schema: {
    track: true,
    properties: {
      id: { type: 'number' /* , or maybe... type: 'string', format: 'uuid' */ },
      name: { type: 'string' }
    }
  }
})
  
  
// now users will be reactive in Vue. for a detailed explaination, see here: https://medium.com/p/525ffe12ad81#c925