概要

Vue/Nuxt + TypeScriptでフロントエンド開発をしています。
プロパティに値をセットしたときに、セットするタイミングが悪いのか、またはセットの仕方が悪いのか
値を読みに行った時にundefinedエラーが出ます。

発生している現象

下記のコードでプロパティpetInfoにサーバから取得したデータを格納しています。

  private petInfo: {
    cats: {
      catId: string
      catName: string
    }[]
  }={cats:[]}

  public async _mounted() {
    this.$nextTick(() => {this.$nuxt.$loading.start()})
    try {this.$nextTick(() => {
        //  省略
      })
      await this.displayPage()
    } catch (e) {
      this.$nuxt.$loading.finish()
      // エラー処理
      return
    }
  }

  private async displayPage() {
    await this.getServerData() 
    const targetCat = this.petInfo.cats.filter(cat => cat.catName === "タマ" )[0]
    // => ここでthis.petInfo.cats.filter(～)の結果が
    //  undefinedなのでエラーになる
  }
  
  // サーバからデータを取得して条件に合うものをthis.petInfoに入れる
  private async getServerData(){
    const prettyCatsList=["タマ","ミケ","クロ"]
    const apiResponse = await getNyankoInfo() 
    // ↑ APIを投げてサーバから情報を取得する関数
    // apiResponse.catsにpetInfoと同じ型のデータが入る

    //ここでpetInfoにデータをセット…しているのだが。。。
    this.petInfo={cats:apiResponse.cats.filter(cat=>prettyCatsList.includes(cat.catName))}
  }

このコードを実行するとdisplayPageメソッドの最後の行で
TypeError: this.petInfo.cats.filter(...)[0] is undefinedが発生します。
しかし、エラーが発生した後、画面をリロードするとundefinedエラーは発生せず、ちゃんとpetInfoにデータが入ってくれます。
そのため、値をセットするタイミングよりも何故か先に値を参照しにいっているのだと推測されるのですが、参照前に値をセットする方法がわかりません。(awaitをかけているので、getServerDataでサーバからデータ取得された後にpetInfoを参照していると思うのですが、にも関わらずundefinedエラーになる理由も不明です)

試したこと

Vue.jsでビューの変更がされないときに疑うこと+主な解決策方法- Qiita
↑の情報を参考にした結果、下記のコードの書き方が悪いのかと思い、修正を試みました。

this.petInfo={cats:apiResponse.cats.filter(cat=>prettyCatsList.includes(cat.catName))}

しかし、下記の２パターンに書き直して動作確認しましたが現象に変化ありませんでした。

// パターン(1)　pushを使ってみる
    apiResponse.cats.forEach(cat=>{
      if(prettyCatsList.includes(cat.catName)){
        this.petInfo.cats.push(cat)
      }
    })

// パターン(2) $setを使ってみる
    this.$set(this.petInfo,"cats",apiResponse.cats.filter(cat=>prettyCatsList.includes(cat.catName)))

また、ブラウザの開発者ツールで確認するとAPIの返り値は想定通りの値が帰ってきているのでAPI側の問題でもなさそうです。

試したことは以上です。どなたかTypeScriptやVueにお詳しい方の情報お待ちしております。よろしくお願いいたします。