Как исправить ошибку Error in callback for watcher?

Question

[Константин]

Понадобился живой поиск, я нашел пример, переработал под себя, в принципе все работает, но в консоли показывает ошибку "[Vue warn]: Error in callback for watcher "keywords": "TypeError: this.fetch is not a function"".
Вот код:

<template>
    <div class="boundary-align">
        <input
            type="text"
            class="uk-input uk-form-large"
            v-model="keywords"
        />
        <div v-if="results.length > 0">
                    <ul>
                        <li
                            v-for="result in results"
                            :key="result.id"
                            v-html="highlight(result.title)"
                        ></li>
                    </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },

    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },

    computed: {
        fetch() {
            axios
                .get("/api/search", { params: { q: this.keywords } })
                .then(response => (this.results = response.data))
                .catch(error => {});
        }
    },

    methods: {
        highlight(text) {
            return text.replace(
                new RegExp(this.keywords, "gi"),
                '<span class="highlighted">$&</span>'
            );
        }
    }
};
</script>

Сначала код был без подсветки "highlight(text)", а fetch() был прописан в methods:. Тогда все работало без ошибок, но затем добавил подсветку и computed: - тогда ошибка появилась.
Как исправить?

Comments

[Михаил]

что fetch делает в computed?

[Константин]

Михаил, я смотрел на этот пример пример вот и ошибся

Answer 1

[0xD34F]

Сначала <...> fetch() был прописан в methods

затем добавил <...> computed: - тогда ошибка появилась

Положите метод fetch где лежал.