title: Array filter with props doesn't seem to work correctly
body: <p>According to <a href="https://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array" rel="nofollow noreferrer">the document</a>, using <code>filter</code> should be very OK. But mine does't work: (try click <code>Remove One</code>, and then <code>Filter One</code>, and then back on <code>Remove One</code>, and then as you can see <code>Remove</code> works, but <code>Filter</code> does't)</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>new Vue({
    el: '#app',
    data() {
      return {
        answers: ['a', 'b', 'c']
      }
    },
    methods: {
      removeOne() {
        this.answers.shift();
        // console.log(this.answers);
      },
      filterOne() {
        this.answers = this.answers.filter((e) =&gt; { return e === 'b'});
        console.log(this.answers);
      }
    },
    components: {
      'mytest': {
        template: `&lt;ul&gt;&lt;li v-for="(v, i) in myAnswers" :key="i"&gt;{{ v }}&lt;/li&gt;&lt;/ul&gt;`,
        props: ['answers'],
        data() {
          return {
            myAnswers: this.answers
          }
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id='app'&gt;
    &lt;mytest :answers="answers"&gt;&lt;/mytest&gt;
    &lt;input @click="removeOne" type="button" value="Remove One" /&gt;
    &lt;input @click="filterOne" type="button" value="Filter One" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>