title: Property or method "foo" is not defined on the instance but referenced during render. Make sure that this property is reactive
body: <p>I'm new on Vue framework and I'm trying to make some composition examples using components, but I having a problem when i try to execute the code:</p>
  
  <pre><code>"Property or method "icons" is not defined on the instance but referenced during render. Make sure that this property is reactive"
  </code></pre>
  
  <p>In template I have:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Welcome a la nueva pagina&lt;/h1&gt;
      &lt;div v-for="icon in icons"&gt;{‌{ icon }}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In a file called Footer.ts I have the followind code:</p>
  
  <pre><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) =&gt; console.log(icon));
      }
  }
  </code></pre>
  
  <p>Finally on App.vue I have:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Pagina principal&lt;/h1&gt;
      &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script lang="ts"&gt;
    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");
        }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>In case of Footer.ts, constructor is never call.</p>
  
  <p>Thanks</p>