JS/Vue Slotmachine - If statement is met but shouldn't

So there is this slot machine simulation script by Todor Balabanov that i'm trying to play around with in Javascript/Vue. Now when a player get's 2 or more Shatters it should trigger free games but this is happening way more then it should.

The full script as it is now can be found here: https://jsfiddle.net/luffyyyyy/485mbwuy/40/

So when i spin sometimes i get "free spins!" while there is no shatters, or there is only one and it will trigger. Also the numberOfScatters seems to get the right amount every time, so that's good i guess. This is the part where (i think) it goes wrong:

  let numberOfScatters = 0;
  for (let i = 0; i < this.view.length; i++) {
    for (let j = 0; j < this.view[i].length; j++) {
      if (this.view[i][j] == 12) {
        numberOfScatters++;
      }
    }
  }

  if (numberOfScatters < 2 && this.freeGamesNumber == 0) {
    return;
  } else if (numberOfScatters >= 2 && this.freeGamesNumber == 0) {
    this.freeGamesNumber = 15;
    this.freeGamesMultiplier = 4;
    this.debug = "free spins!";
    this.totalNumberOfFreeGameStarts++;
  } else if (numberOfScatters >= 2 && this.freeGamesNumber > 0) {
    this.freeGamesNumber += 15;
    this.freeGamesMultiplier = 4;
    this.totalNumberOfFreeGameRestarts++;
    this.debug = "respins!!";
  }

And this is what my this.view array looks like:

  view: [
    [-1, -1, -1], //col 1
    [-1, -1, -1], //col 2..
    [-1, -1, -1],
    [-1, -1, -1],
    [-1, -1, -1]
  ],