[Vuejs]-How to call vue list data property in an if statement

When you are populating the Squares, you are only ever setting the state = “e”, so are you only seeing the white and black squares? no red?

this.squares[c][r] = {x: c* (this.squareW + 3), y: r* (this.squareH + 3), state: 'e'};

try something like this

this.squares[c][r] = {x: c* (this.squareW + 3), y: r* (this.squareH + 3), state: (r+c)%2=0? 'e':'s'};

not sure if you can set the state in the object with a ternary, but if not, move it to a method

The (r+c)%2 will alternate across the rows, checkerboard style, I believe