vue не определено в экземпляре, но указано во время рендеринга

Я пытаюсь создать простое приложение в vue, и я получаю сообщение об ошибке. Моя функция onScroll ведет себя так, как ожидалось, но моя функция sayHello возвращает ошибку, когда я нажимаю компонент кнопки

Свойство или метод "sayHello" не определен в экземпляре, но упоминается во время рендеринга. Обязательно объявляйте свойства реактивных данных в опции данных. (найдено в компоненте)

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

Я чувствую, что ответ действительно очевиден, но я пробовал искать и ничего не придумал. Любая помощь будет оценена по достоинству.

Благодарю.

Ответы

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