Weird prop initialisation

--

by Rahul Kadyan

HTML

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

<div id="app"></div>

JavaScript

var x = {
  props: ['x', 'y'],
  data: function() {
    return {
      u: this.x,
      w: this.y
    }
  },
  template: '<div>hello {{u}} / {{w}}</div>'
};
new Vue({
  el: '#app',
  data: {
    items: []
  },
  template: '<div>' +
    '<input v-model.number="x" type="text">' +
    '<input v-model.number="y" type="text">' +
    '<input type="submit" @click="addElementWithPush" value="push"></input>' +
    '<br/>' +
    '<input type="submit" @click="addElementWithUnshift" value="unshift"></input>' +
    '<my-component v-for="item in items" :x="item.x" :y="item.y"></my-component>' +
    '</div>',
  methods: {
    addElementWithPush: function(e) {
      e.preventDefault();
      this.items.push({
        x: this.x,
        y: this.y
      });
    },
    addElementWithUnshift: function(e) {
      e.preventDefault();
      this.items.unshift({
        x: this.x,
        y: this.y
      });
    }
  },
  components: {
    'my-component': x
  }
})