プロパティまたはメソッド「foo」はインスタンスで定義されていませんが、レンダリング中に参照されます。このプロパティがリアクティブであることを確認してください

私はVueフレームワークを初めて使用し、コンポーネントを使用していくつかの構成例を作成しようとしていますが、コードを実行しようとすると問題が発生します。

"Property or method "icons" is not defined on the instance but referenced during render. Make sure that this property is reactive"

テンプレートには次のものがあります。

<template>
  <div>
    <h1>Welcome a la nueva pagina</h1>
    <div v-for="icon in icons">{‌{ icon }}</div>
  </div>
</template>

Footer.tsというファイルには、次のコードがあります。

import {Component, Vue} from "vue-property-decorator";
import Template from './Footer.vue';

@Component({
    mixins: [Template]
})
export default class Footer extends Vue {
    public icons!: string[];

    constructor() {
        super();
        this.icons = [
            'fab fa-facebook',
            'fab fa-twitter',
            'fab fa-google-plus',
            'fab fa-linkedin',
            'fab fa-instagram'
        ];

        console.log('Footer renderizado');
        this.icons.map((icon) => console.log(icon));
    }
}

最後にApp.vueで私は持っています：

<template>
  <div>
    <h1>Pagina principal</h1>
    <footer></footer>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import Footer from '@/component/Footer';

  @Component({
      components: {
          Footer
      }
  })
  export default class App extends Vue {
      mounted() {
          console.log("ensamblado terminado");
      }
  }
</script>

Footer.tsの場合、コンストラクターは呼び出されません。

ありがとう