title: Unable to update "data" using "computed" setters in vuejs(2)
body: <p>I have this code - </p>
  
  <pre><code>Vue.component('competetion-list', {
    template: `&lt;div&gt;&lt;p&gt;{{competition}}&lt;/p&gt;&lt;p&gt;{{totalCompetitions}}&lt;/p&gt;&lt;/div&gt;`,
    props: ['values'],
    data: function () {
       return {totalCompetitions: this.values.length}
    },
    computed:{
      competition:{
        get: function(){
          return this.values.length;
        },
        set: function(){
          this.totalCompetitions = this.values.length;
        }
      } 
    } 
  })
  </code></pre>
  
  <p>and the output I get is - </p>
  
  <pre><code>15
  0
  </code></pre>
  
  <p>So, when I call <code>competition</code> it does return the length of the <code>values</code> prop but it doesn't set the length to <code>totalCompetition</code> and shows 0 which is the initiated value.</p>
  
  <p>However, I was able to update <code>totalCompetition</code> through the <code>watch</code> property.</p>
  
  <pre><code>watch: {
     values: function(){
       this.totalCompetetions= this.values.length
     }
  }
  </code></pre>
  
  <p>Now, my question is, why can't I update the <code>data</code> property values through <code>computed</code> setters while the getters can return the same?</p>