Получение данных из api при наступлении события во Vue.js

Задача: получить и отобразить данные с сервера после отправки формы. Проблема: код работает корректно при клике мышкой на кнопку найти(submit), при отправке формы по нажатию enter, то запрос выполняется дважды, при этом один успешно, а второй возвращает 404. Данные отображаются вместе с блоком об ошибке. Важна реализация именно во Vue без Vuex. Думал, что задвоение происходит из-за очистки инпута, но не помогло. Возможно это следовало как-то реализовать через lifecycle методы.. Пример кода:
Search.vue

<template>
    <div class="container">
        <form @submit.prevent="onSubmit">
            <input
                type="search" placeholder="Укажите город.."
                v-model="searchText"
            >
            <button type="submit">Найти</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchText: ''
        }
    },
    methods: {
        onSubmit() {
            if(this.searchText.trim()) {
                this.$emit('search', this.searchText);
                this.searchText = '';
            }
        }
    }
}
</script>

App.vue:

<template>
    <h1>Прогноз погоды <span class="town-name">{{ town }}</span></h1>
    <Search @search="searchTown"/>
    <WeatherTable
        :forecast='forecast'
        v-if="forecast.length > 0"
    />
    <p v-if="errored">Упс, ничего не найдено! Попробуйте ввести другой город..</p>
</template>

<script>
import Search from '@/components/Search'
import WeatherTable from '@/components/WeatherTable'
export default {
  name: 'App',
    data() {
        return {
            town: '',
            forecast: [],
            errored: false
        }
    },
  components: {
        Search,
        WeatherTable
  },
    methods: {
        async searchTown(searchText) {
            this.town = searchText;

            await fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${searchText}&units=metric&cnt=10&lang=ru&appid=мойId`)
            .then(res => {
                if (res.status === 200 || res.status === 201) {
                    this.errored = false;
                    res.json()
                    .then(json => this.forecast = json.list);
                } else {
                    console.log (res.status);
                    this.errored = true;
                    this.forecast = [];
                    return;
                }
            })
        }
    }
};
</script>