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

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

Благодарю.

Ответ 1

Но для некоторых конкретных обстоятельств (главным образом, props) каждый компонент полностью изолирован друг от друга. Отдельные данные, переменные, функции и т.д. Это включает их методы.

Таким образом, test-item не имеет метода sayHello.

Ответ 2

Вы можете избавиться от предупреждения с помощью .mount('#app') после экземпляра Vue, а не атрибута el.

Проверьте фрагмент ниже;

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

Пожалуйста, обратите внимание; возможно, не было необходимости, но сделал это по пути, пытаясь решить ту же проблему: проект Laravel Elixir Vue 2.