vue is not defined on the instance but referenced during render : <p>I'm trying to build a simple app in vue and I'm getting an error. My onScroll function behaves as expected, but my sayHello function returns an error when I click my button component</p>

<blockquote>
  <p>Property or method "sayHello" is not defined on the instance but
  referenced during render. Make sure to declare reactive data
  properties in the data option. (found in component )</p>
</blockquote>

<pre><code>Vue.component('test-item', {
    template: '&lt;div&gt;&lt;button v-on:click="sayHello()"&gt;Hello&lt;/button&gt;&lt;/div&gt;'
});

var app = new Vue({
    el: '#app',
    data: {
        header: {
            brightness: 100
        }
    },
    methods: {
        sayHello: function() {
            console.log('Hello');
        },
        onScroll: function () {
            this.header.brightness = (100 - this.$el.scrollTop / 8);
        }
    }
});
</code></pre>

<p>I feel like the answer is really obvious but I've tried searching and haven't come up with anything. Any help would be appreciated.</p>

<p>Thanks.</p>
