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

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 )

Vue.component('test-item', {

    template: '<div><button v-on:click=sayHello()>Hello</button></div>'

});



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);

        }

    }

});

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.

Thanks.