title: Vuejs 2.1.10 method passed as prop not a function
body: <p>I'm very new to Vuejs and JS frameworks in general, so bear with me. I'm trying to call a method that resides in my root component from a child component (2 levels deep) by passing it as a prop, but I get the error:</p>
  
  <pre><code>Uncaught TypeError: this.onChange is not a function
  at VueComponent._onChange (category.js:8)
  at boundFn (vendor.js?okqp5g:361)
  at HTMLInputElement.invoker (vendor.js?okqp5g:2179)
  </code></pre>
  
  <p>I'm not sure if I'm on the right track by assigning the prop to a method inside the child component, but see what you think:</p>
  
  <p>index.js</p>
  
  <pre><code>var app = new Vue({
  
      el: '#app',
      data: function () {
          return {
              categories: [],
              articles: []
          }
  
      },
  
      methods: {
          onChange: function () {
  
              console.log('first one');
  
              return function () {
                  console.log('second one');
              }
  
          }
  
      },
  });
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;sidebar :onChange=onChange :categories=categories&gt;&lt;/sidebar&gt;
      &lt;varticles :articles=articles&gt;&lt;/varticles&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>sidebar.js:</p>
  
  <pre><code>Vue.component('sidebar', {
  
      props: ['onChange', 'categories'],
  
  
      methods: {
          _onChange: function () {
              this.onChange();
          }
      },
  
  
      template: `
          &lt;div class="sidebar"&gt;
  
          &lt;category v-for="item in categories" :onChange="_onChange" v-bind:category="item"&gt;&lt;/category&gt;
  
      &lt;/div&gt;
      `
  });
  </code></pre>
  
  <p>category.js:</p>
  
  <pre><code>Vue.component('category', {
  
      props: ['category', 'onChange'],
  
  
      methods: {
          _onChange: function () {
              this.onChange();
          }
      },
  
  
      template: `
          &lt;div class="category"&gt;
              &lt;h2&gt;{{ category.name }}&lt;/h2&gt;
  
              &lt;ul&gt;
                  &lt;li v-for="option in category.options"&gt;
                  &lt;input v-on:change="_onChange" v-bind:id="option.tid" type="checkbox" v-model="option.checked"&gt;
                   &lt;label v-bind:for="option.tid"&gt;{{ option.name }}&lt;/label&gt;
                   &lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      `
  });
  </code></pre>
  
  <p>There's got to be simpler way to do this!</p>