title: Vue 2 - Mutating props vue-warn
body: <p>I started <a href="https://laracasts.com/series/learning-vue-step-by-step" rel="noreferrer">https://laracasts.com/series/learning-vue-step-by-step</a> series. I stopped on the lesson <strong>Vue, Laravel, and AJAX</strong> with this error:</p>
  <blockquote>
  <p>vue.js:2574 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: &quot;list&quot; (found in component )</p>
  </blockquote>
  <p>I have this code in <strong>main.js</strong></p>
  <pre class="lang-vue prettyprint-override"><code>Vue.component('task', {
      template: '#task-template',
      props: ['list'],
      created() {
          this.list = JSON.parse(this.list);
      }
  });
  new Vue({
      el: '.container'
  })
  </code></pre>
  <p>I know that the problem is in <strong>created()</strong> when I overwrite the list prop, but I am a newbie in Vue, so I totally don't know how to fix it. Does anyone know how (and please explain why) to fix it?</p>