Vue: V-if

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>inner</div>',
});

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