vue data variables are undefined in method

Question

I'm working with Vue and making a game and when getting the data for said game, some variables that I have defined in data are being returned undefined. Here's the code:

data() {
    return {
      receivedGame: undefined,
      allSteps: [],
}

methods: {

     async gameData() {
     const response = await fetch(`...`);

        const responseData = await response.json();

        this.receivedGame = responseData.steps; //returns correct data

        responseData.steps.map((step) => {
          this.allSteps.push({ //returns error, allSteps is undefined
            type: step.type,
          });
        });
 }
}

Answer 1

The data hook must be a function that returns an object. Here you don't return anything!

data() {
  return {
    receivedGame: undefined,
    allSteps: [],
  }
}