javascript - すべてのプロパティがリアクティブであることを確認する - VueJS

Question

「子」ルーターコンポーネントを構築しているときに、特定のプロパティが反応しない可能性があることを伝える[Vue Warn]に遭遇しました。これが私のシナリオです：

ルーター:

{
    path: '/leagues/:id',
    name: 'League',
    meta: {requiresAuth: true},
    component: League,
    children: [
      {
        name: 'ActiveSeason',
        path: 'active_season',
        meta: {requiresAuth: true},
        component: ActiveSeason
      }
    ]
  },

League.vue (親)

ここでは、子コンポーネントで使用する「router_view」にいくつかの値を渡しています。"active_season" サーバーからの応答から取得します。

<router-view
      :active_season_present="active_season_present"
      :active_season="active_season"
    />

   // Network call
   axios.get(process.env.ROOT_API + '/leagues/' + params.id, {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    }).then(response => {
      this.active_season = response.data.league.active_season
    }).catch(error => {
    })

ActiveSeason.vue (子)

<template>
  <div v-if="active_season_present">
    <div class="page-container__table">
      <h3 class="page-container__table__header">Active Season</h3>
      <v-data-table
        :headers="headers"
        :items="active_season.active_teams"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-left">{{ props.item.name }}</td>
          <td class="text-xs-left">{{ props.item.score }}</td>
        </template>
      </v-data-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActiveSeason',
  props: [
    'active_season_present',
    'active_season'
  ],
}
</script>

警告を表示

[Vue warn]: Property or method "active_season" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

データは子コンポーネントに表示されているため、機能の観点からは問題ないと思いますが、明らかにこの警告を処理したいと考えています。どんな助けでも大歓迎です。