Приложение Vue: Почему axios не будет ждать завершения после определения результата?

Question

У меня есть компонент, который извлекает данные из API и заполняет мою таблицу boostrap-vue строками. Строки имеют галочки, которые собирают идентификаторы строк и отправляют их в API для их удаления. Бэкэнд работает отлично. Моя цель - снова вызвать API после вызова удаления, чтобы получить обновленный набор данных и повторно обработать мою таблицу, но мой второй вызов axios запускается до того, как данные моего компонента могут обновиться.

Итак, основная последовательность будет:

1. Получить исходные данные
2. Отправить запрос на удаление для 1 или более строк
3. Получить новые данные и обновить таблицу

Проблема возникает между шагами 2 и 3

Я попытался разрешить вызов axios для удаления и выполнить новый вызов axios внутри блока .then()

Начальная загрузка (ajax - просто объект-оболочка для запроса axios)

ajax.get(url + queryOrder)
    .then((response) => {
        console.log(response.data)
        this.fileData = response.data.queryResults;
        window.scrollTo(0, 0);
}) 

Когда строки проверены и нажата кнопка удаления

ajax.delete(this.deleteUrl, {data: payload})
  .then((response) => {
    console.log("sent delete request.....")
    this.fileData = []; // array of objects to populate rows
    this.deleteFiles = [];
    this.closeModal();
    this.sendSortData();
});

и функция sendSortData() просто содержит другой запрос axios для извлечения обновленных данных, который совпадает с начальной загрузкой.

ajax.get(this.searchUrl + searchFieldsQuery)
    .then((response) => {
        console.log(response.data)
        this.fileData = response.data.queryResults; // should contain updated data
        window.scrollTo(0,0);
      })

Я зарегистрировал несколько значений в каждой функции и могу подтвердить, что происходит правильная последовательность, и даже проверил журналы сервера, чтобы убедиться, что они отправлены в правильном порядке. Я попытался использовать async / await, который является просто синтаксическим сахаром и дает тот же результат. Я проверил, что изменение значения prop fileData изменяет данные таблицы дочерних компонентов, поэтому я не уверен, что еще я делаю неправильно.

Я также проверил вкладку сети в инструментах chrome dev, просмотрел данные для начальных и конечных запросов и подтвердил, что удаленный файл все еще присутствует в новых данных, однако, если я ставлю точки останова в отладчике chrome, и проверьте значение нового ответа в sendSortData(), удаленный файл исчезнет, ​​и страница будет правильно отрисована. Это наводит меня на мысль, что асинхронный характер этих вызовов axios не работает должным образом. Конечно, если я обновлю страницу, удаленная строка пропадет, но я бы хотел перерисовать компонент без обновления. Должен ли я поставить watch() на детскую опору? Должен ли я использовать метод жизненного цикла? Также обратите внимание, что все эти вызовы происходят внутри одного компонента. Любые ответы приветствуются !!