Не обновляется свойство в компоненте Vue

Есть родительский компонент, в котором строится таблица при помощи данных полученных из БД при помощи использования такого хука:

created: function () {this.getPacts();},

код метода getPacts такой:

getPacts: function () {
  axios
   .get('/pact/get-pacts', {timeout: 2000})
   .then(response => {
     this.loadData = response.data.data
    })
    .catch(error => {
     console.log(JSON.stringify(error))
    })
  },

свойство this.loadData прописано так:

data: function () {
  return {
    loadData: [],
    operators: [],
    isActiveDeletePactModal: false,
    isActiveAddPactModal: false,
    isActiveUpdatePactModal: false,
    indexDeletedPact: 0,
    indexUpdatedPact: 0,
   }
 },

Есть дочерний компонент - модальное окно. Используется для записи данных в БД. Мне нужно, чтобы после закрытия модального окна, отправлялся запрос в БД, для обновления таблицы в родительском элементе. Я сделал генерацию события при закрытии модального окна и в родительском компоненте прописал отлов этого события, но он не отрабатывает.

Вот так прописано в дочернем компонете:

methods: {
  closeModal: function () {
     this.$emit('reload');
     this.$parent.isActiveAddPactModal = false;
     this.clearAllData();
    },
  }

Вот так прописано в родительском компоненте:

<h2 class="main-color active-element" @reload="getPacts">Перелік договорів</h2>

В итоге: метод getPacts даже не вызывается.

В чем может быть проблема?