title: How to solve [Vue warn]: Avoid mutating a prop directly since the value will be overwritten on vue.js 2?
body: <p>My view is like this :</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
      ...
          &lt;star :value="{{ $data['rating'] }}"&gt;&lt;/star&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>My star component is like this :</p>
  
  <pre><code>&lt;template&gt;
      &lt;span class="rating" :class='{"disable-all-rating": !!value}'&gt;
          &lt;template v-for="item in items"&gt;
              &lt;label class="radio-inline input-star" :class="{'is-selected': ((starValue&gt;= item.value) &amp;&amp; starValue!= null)}"&gt;
                  &lt;input type="radio" class="input-rating" v-model="starValue" @click="rate(item.value)"&gt;
              &lt;/label&gt;
          &lt;/template&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default{
          props: {
              'value': null
          },
          computed: {
              starValue () {
                  return this.temp_value
              }
          },
          data(){
              return{
                  items: [
                      {value: 5},
                      {value: 4},
                      {value: 3},
                      {value: 2},
                      {value: 1}
                  ],
                  temp_value: null,
              }
          },
          methods:{
              rate: function (star) {           
                 this.$http.post(window.BaseUrl + '/star', {star: star});                         
                 this.temp_value = star;                         
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My css is like this :</p>
  
  <pre><code>span.rating {
    direction: rtl;
    display: inline-block;
  }
  
  span.rating .input-star {
    background: url("../img/star.png") 0 -16px;
    padding-left: 0;
    margin-left: 0;
    width: 16px;
    height: 16px;
  }
  
  span.rating .input-star:hover, span.rating .input-star:hover ~ .input-star {
    background-position: 0 0;
  }
  
  span.rating .is-selected{
     background-position: 0 0;
  }
  
  span.rating .is-disabled{
     cursor: default;
  }
  
  span.rating .input-star .input-rating {
    display: none;
  }
  </code></pre>
  
  <p>When I click the star, there exist error on the console like this :</p>
  
  <blockquote>
    <p>[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: "value"  (found in  at
    C:\xampp\htdocs\myshop\resources\assets\js\components\Star.vue)</p>
  </blockquote>
  
  <p>How can I solve it?</p>