nuxt-property-decorator コンポーネントを読み込まなくても@Componentは書きましょう

前提

• @nuxtjs/axios: ^5.10.3
• nuxt: ^2.0.0
• nuxt-property-decorator: ^2.7.2
• Typescript 3.8.3

エラー内容

下のコードをyarn devで動かすと
Cannot set property 'components' of undefined
とエラーが出て動かない．

sample/index.ts

<script lang="ts">
import Vue from "vue";
import { Component } from "nuxt-property-decorator";
import { Context } from "@nuxt/types";

export interface FactResponse {
  id: string;
  text: string;
  type: string;
}

export default class index extends Vue {
  facts!: FactResponse[];

  async asyncData(context: Context): Promise<object | void> {
    const response = await context.app.$axios.$get(
      "https://cat-fact.herokuapp.com/facts"
    );
    const facts = response.all;

    return { facts };
  }

  get filterResponse(): FactResponse[] {
    return this.facts.filter(f => {
      return f.type == "cat";
    });
  }
}

エラーの原因

Component宣言が抜けていた．
Componentを外部から読み込んでいなくても書かないといけない．
自分は無意識に2回経験しました．．．

解決策

+ @Component({ computed: {} })

sample/index.ts

<script lang="ts">
import Vue from "vue";
import { Component } from "nuxt-property-decorator";
import { Context } from "@nuxt/types";

export interface FactResponse {
  id: string;
  text: string;
  type: string;
}
+ @Component({ computed: {} })
export default class index extends Vue {
  facts!: FactResponse[];

  async asyncData(context: Context): Promise<object | void> {
    const response = await context.app.$axios.$get(
      "https://cat-fact.herokuapp.com/facts"
    );
    const facts = response.all;

    return { facts };
  }

  get filterResponse(): FactResponse[] {
    return this.facts.filter(f => {
      return f.type == "cat";
    });
  }
}