Vue: Reactive Objects

When are they reactive?

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <subcomponent :obj1="obj1" :obj2="obj2" :obj3="obj3"></subcomponent>
  <subcomponent2 :obj1="obj1" :obj2="obj2" :obj3="obj3"></subcomponent2>
</div>

Babel + JSX

Vue.component('subcomponent', {
  template: '<div><p>{{obj1}}</p><hr><p>{{obj2}}</p><hr><p>{{obj3}}</p></div>',
  props: ['obj1', 'obj2', 'obj3']
});

Vue.component('subcomponent2', {
  template: '<div><p>{{obj1}}</p><hr><p>{{obj2}}</p><hr><p>{{obj3}}</p></div>',
  props: {
  	obj1: Object,
    obj2: Object,
    obj3: Object,
  }
});

let obj1 = {};
let obj2 = { wtf: 1 };
let obj3 = {};

new Vue({
  el: '#app',
  data(){
    return {
      obj1: obj1,
      obj2: obj2,
      obj3: obj3
    };
  },
  mounted() {
  	this.obj2.key2 = 'cool?!';
    this.obj2.wtf = 'some new stuffffff'
    // uncomment this and timeout code will work
    // this.$set(obj1, 'key1', 'new stuff')
  }
});

// this wont do anything by itself
setTimeout(() => {
  obj1.key1 = 'val1';
  obj3.key3 = 'val3';
  // OR uncomment this and it will work
  // Vue.set(obj2, 'wtf', 'val3');
}, 1000);

// notes:
// using Vue.set or $set causes object to become reactive, including other props
// not using it will prevent elements from updating