Vue: Bind example

When are they reactive?

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <my-component val1="vals.v1" :val2="vals.v2"></my-component>
</div>

Babel + JSX

Vue.component('my-component', {
  template: '<div><h1>{{typeof val1}}{{val1}}</h1><br><h2>{{typeof val2}}{{val2}}</h2></div>',
  props: ['val1','val2'],
})

const vals = {
	v1: 0,
  v2: 0
};

new Vue({
  el: '#app',
  data(){
    return {
      vals
    };
  },
  mounted() {
  	setInterval(() => {
      vals.v1++;
			vals.v2++;
    }, 1000);
  }
});