Property or method "foo" is not defined on the instance but referenced during render

I'm new to Vue, I'm just trying to understand how component inclusions work correctly in this framework. I am having the following error after executing the code shown below:

  

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

In the file Footer.vue I have:

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

In Footer.ts I have the following code:

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));
    }
}

finally on 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>