Vue 2 repro template

Template to provide a repro for a Vue 2 issue

by Christopher O

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Something: {{ something }}
  <foo :item="props"></foo>
  
  <pre>{{props}}</pre>
</div>

JavaScript

console.clear();
/*
Vue.component('foo', {
  props: ['a', 'b'],
  template:`<p>{{ a }}<br>{{ b }}</p>`,

  methods: {
    clicky(id){
      console.log("Clicked: " + id);
    },
    doubleClicky(id){
      console.log("Double-Clicked: " + id);
    },
  },
});
*/

/* Vue.component('foo', {
  props: ['item'],
  template:`<p>{{ item.a }}<br>{{ item.b }}</p>`,

}); */

Vue.component('foo', {
  props: ['item'],
  template:`<p>{{ item.a.pets.dog }}<br>{{ item.b.name }}</p>`,

});

new Vue({
  el: '#app',
  data: {
    something: 'Works',
    props: {
    	a: {
      	name: 'apple',
        friends:["jane","sam"],
        pets:{
        	"dog":"dexter",
          "rabbit":"fluffy"
        }
      },
      
      b: {
      	name: 'banana',
        friends:["bob","amanda"],
        pets:{
        	"sheep":"baaahaaa",
          "turtle":"shelly"
        }
      },
   }
  },
  /* components: {
    foo: {
      template: '<p>{{ a }}<br>{{ b }}</p>',
      props: ['a', 'b']
    }
  }, */
  created: function() {
  	self = this;

    //Vue.set(self.props, "a", "Yeah");
    
    setInterval(function(){
        var now = new Date();
        var ts = Math.round(now.getTime() / 1000);
        console.log("Now: " + ts);
        
        // Vue.set(self.props, "a", "Now: " + ts);
        Vue.set(self.props.a.pets, "dog", "Now: " + ts);
        
    }, 2000);
    
  }
  
  
})