Vue js: следующая строка выполняется перед завершением выполнения метода в предыдущей строке

Question

Пожалуйста, отметьте этот метод.

    countrySelected: function (country) {
         this.selected_search.country = country.trim();
         this.selected_search.city = ''
         this.fetchCities(country)
         this.search();
    }

fetchCities (страна) - это метод получения городов в выбранной стране. search () - это метод для получения некоторых других сведений, которые имеют выбранную страну

    fetchCities: function (country, query){
        fetch('/bling/api/cities/' + country + "?query=" + query, {method: 'get', signal: this.controller.signal})
           .then((response) => response.json())
           .then((data) => {this.dataCities = data})
    }

    search: debounce(function (data = {}, component) {
       return fetch('/bling/api/_blingers' +
                    '?country=' + encodeURIComponent(this.selected_search.country) +
                    '&city=' + encodeURIComponent(this.selected_search.city) +
                    (this.sortBy ? '&sort=' + this.sortBy.path + ',' + this.sortBy.key : '')

                    + (data.page ? '&page=' + data.page : ''),
                    {method: 'get', signal: this.controller.signal})
                    .then((response) => response.json().then((data) => {
                    this.searchResults = data;
                this.onProgress = false;
       }))
       .catch(e => {
       })
    }, 100)

. В этом методе метод search () должен работать после выполнения fetchCities (). В настоящее время происходит то, что search () работает до завершения выполнения fetchCities ().

Как мне сделать это правильно?