Why arrow function in vue computed does not work?

I am learning Vue and facing a problem while using arrow function in computed property. My original code works fine (See snippet below).
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} } } });

.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; }
However, after I change methods in computed property, the color will not change (though the turnRed value still switch between true and false successfully). This is my code:
computed:{ switchRed: () => { return {red: this.turnRed} }, switchGreen: () => { return {green: this.turnGreen} }, switchBlue: () => { return {blue: this.turnBlue} } }
Do I use the wrong syntax ?

Write your answer...

It's not the same without you

Join the community to find out what other Ednsquare users are discussing, debating and creating.