Use arrow function in vue computed does not work

Question

I am learning Vue and facing a problem while using arrow function in computed property.

My original code works fine (See snippet below).

Answer 1

The arrow function lost the Vue component context. For your functions in methods, computed, watch, etc., use the Object functions:

computed:{
    switchRed() {
        return {red: this.turnRed}
    },
    switchGreen() {
        return {green: this.turnGreen}
    },
    switchBlue() {
        return {blue: this.turnBlue}
    }
}