Use arrow function in vue computed does not work : <p>I am learning Vue and facing a problem while using arrow function in computed property.</p>

<p>My original code works fine (See snippet below).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
  	switchRed: function () {
    	return {red: this.turnRed}
    },
    switchGreen: function () {
    	return {green: this.turnGreen}
    },
    switchBlue: function () {
    	return {blue: this.turnBlue}
    }
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;
  &lt;div class="demo" @click="turnRed = !turnRed" :class="switchRed"&gt;&lt;/div&gt;
  &lt;div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"&gt;&lt;/div&gt;
  &lt;div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>However, after I change methods in computed property, the color will not change (though the turnRed value still switch between true and false successfully).</p>

<p>This is my code:</p>

<pre><code>computed:{
    switchRed: () =&gt; {
        return {red: this.turnRed}
    },
    switchGreen: () =&gt; {
        return {green: this.turnGreen}
    },
    switchBlue: () =&gt; {
        return {blue: this.turnBlue}
    }
}
</code></pre>

<p>Do I use the wrong syntax ?</p>
