title: Vue Component Property or method "x" is not defined
body: <p>Got a problem that my component in vue is not working correctly.
  I am kinda new to the typescript stuff so don't know alot about it.
  Also in the vue debugger in Chrome it says it has two $attr: title and link.
  Got two files at this moment.
  The navigation:</p>
  <pre><code>&lt;template&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-light&quot;&gt;
          &lt;router-link to=&quot;/&quot; class=&quot;navbar-brand&quot;&gt;HBS2&lt;/router-link&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navContent&quot; aria-controls=&quot;navContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=navContent&gt;
              &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
                  &lt;NavItem  v-for=&quot;menuItem in menuItems&quot;
                  v-bind:key=&quot;menuItem.id&quot;
                  v-bind:title=&quot;menuItem.title&quot;
                  v-bind:link=&quot;menuItem.link&quot;
                  /&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import NavItem from '@/components/common/main/navigation/NavItem.vue'
  
  @Component({
    components: {
      NavItem
    }
  })
  export default class Navigation extends Vue {
      menuItems = [
        {
          id: 1,
          title: 'foo',
          link: '/foo'
        },
        {
          id: 2,
          title: 'bar',
          link: '/bar'
        }
      ]
  }
  &lt;/script&gt;
  </code></pre>
  <p>and the NavItem Component</p>
  <pre><code>&lt;template&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
          {{title}}
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  
  import { Prop, Component, Vue } from 'vue-property-decorator'
  
  @Component
  export default class NavItem extends Vue {}
  
  </code></pre>
  <p>I also tried to create a Prop in the NavItem but also didn't work.</p>
  <p>Edit:
  The error message is as following:</p>
  <pre><code>vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method &quot;title&quot; 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. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  
  found in
  
  ---&gt; &lt;NavItem&gt; at src/components/common/main/navigation/NavItem.vue
         &lt;Navigation&gt; at src/components/common/main/navigation/Navigation.vue
           &lt;App&gt; at src/App.vue
             &lt;Root&gt;
  </code></pre>