title: Vue JS dynamic content based on link
body: <p>I am totally newbie with Vueand I am trying to figure out how can I render dynamic content based on link click. I am getting an error message: <strong>Property or method "setLink" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.</strong></p>
  
  <p>Here is my VUE code:</p>
  
  <pre><code>Vue.component('navigation', {
              template: '#navigation'
          })
  
          Vue.component('home', {
              template: '#home'
          })
  
          Vue.component('about', {
              template: '#about'
          })
  
          var app = new Vue({
              el: '#app',
  
              component: {
                  navigation
              },
  
  
              data: {
                  currentView: 'home'
              },
  
              methods: {
                  setLink: function(link) {
                      this.currentView = link;
                  }
              }
          })
  </code></pre>
  
  <p>and I have div with id app:</p>
  
  <pre><code>&lt;div id="app"&gt;
          &lt;navigation&gt;&lt;/navigation&gt;
          &lt;div class="container"&gt;
              &lt;componet :is="currentView"&gt;&lt;/component&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In navigation I have a tag with v-on:click="setLink('someLink')" function. Maybe someone knows where the issue could be? Thank you</p>