title: VueJs doesn't update when binding passed props to data
body: <p>I'm a beginner in vue. I was wondering why the lifecycle of vue doesn't trigger when the value updates.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('list-table', {
    props: ['data'],
    template: `
      &lt;div&gt;
        {{ mydata }}
      &lt;/div&gt;
    `,
    beforeUpdate () { console.log('before update') },
    updated () { console.log('updated') },
    data () {
      return {
        mydata: this.data
      }
    }
  })
  
  const app = new Vue({
    el: '#app',
    data: {
      datum: [
        { f: 'John', l: 'Doe', g: 'Male' },
        { f: 'Jane', l: 'Doe', g: 'Female' },
        { f: 'John', l: 'Smith', g: 'Male' },
        { f: 'Jane', l: 'Smith', g: 'Female' },
        { f: 'Roy', l: 'Smith', g: 'Male' },
        { f: 'Reign', l: 'Smith', g: 'Female' }
      ],
      itemPerPage: 2,
      currentPage: 0
    },
    computed: {
      filteredList () {
        const startIdx = this.currentPage * this.itemPerPage
        const endIdx = startIdx + this.itemPerPage 
        return this.datum.slice(startIdx, endIdx)
      },
      totalPages () {
        return Math.ceil(this.datum.length / this.itemPerPage)
      }
    },
    methods: {
      setPage (num) {
        this.currentPage = num - 1
      }
    }
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that the binding won't change because it was instantiated on passing only but if you see the <code>updated</code> function it won't trigger the log. Here's <a href="http://codepen.io/mateeyow/pen/pPRaob" rel="nofollow noreferrer">a pen</a> to check it.</p>