Memory leak occurs when changing the value indicating an index in a computed property

Question

I have a problem with my computed property

correctAnswersForCurrentStage(): object {return 
    return this.correctAnswers[this.currentLevel] ?? {};
},

Some background: this.CorrectAnswers is an object where the properties are the levels and the values ​​are the objects for each door:

this.correctAnswers = {
     "1": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
    "2": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
}

So when a level is completed, I will add levels

this.currentLevel++

Everything will block after this. I don't know if it's Vue or TypeScript that's causing this problem. Or maybe a combination of the two? Does anyone know why this is happening?

I tried turning off the level increase and then there was no problem. Obviously I've stayed on the same level. But other reset logic works

follow up:

When I changed it so that it didn't need to use an index, I still had the same problem, now I've done it:

correctAnswersForCurrentStage(): object {
    if (this.currentLevel === 1) {
        return this.correctAnswersForLevel1;
    }
    if (this.currentLevel === 2) {
        return this.correctAnswersForLevel2;
    }
    if (this.currentLevel === 3) {
        return this.correctAnswersForLevel3;
    }
    if (this.currentLevel === 4) {
        return this.correctAnswersForLevel4;
    }
    return {};
},

Answer 1

It's hard to tell with the code currently provided, but I suspect this.CorrectAnswersForLevel1 etc. are also computed properties. This means you get a circular reference, resulting in an infinite loop.

In addition to this, the code also contains incorrect references: this.CorrectAnswers['1'] differs from this.CorrectAnswers[1] in that it compares strings and numbers to each other.