Vue: Reactive Arrays

When are they reactive?

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <subcomponent :arr1="store.arr1" :arr2="store.arr2" :arr3="store.arr3"></subcomponent>
</div>

JavaScript

Vue.component('subcomponent', {
  template: '<div><p>{{arr1}}</p><hr><span v-for="item in arr2">{{item.test}}</span><hr><p>{{arr3}}</p></div>',
  props: {
  	arr1: Array,
    arr2: Array,
    arr3: Array
  }
});

var store = {
	arr1: [],
  arr2: [],
  arr3: []
};

new Vue({
  el: '#app',
  data: {
  	store: store
  }
});


setInterval(() => {
	store.arr1.push(store.arr1.length);
 	store.arr2.push({ test: store.arr2.length });
  store.arr2[0].test = store.arr2[0].test - 1;
  store.arr3 = [ ...store.arr3, store.arr3.length ];
}, 1000);