Я пытаюсь обновить Массив сотрудников в моем возврате данных на основе моего поиска из дочернего компонента. VueJS

Question

Используя VueJS, у меня есть файл EmployeeList, который импортирует BaseTable как дочерний компонент для составления списка сотрудников на основе массива с именем info (где я делаю вызов API для получения списка сотрудников). Мне удалось реализовать панель поиска, которая позволяет успешно искать любое имя сотрудника с помощью функции фильтра. Однако информационный массив не обновляется в соответствии с результатами поиска. Поэтому, когда я нажимаю на уникальную строку сотрудника, чтобы просмотреть его информацию, вместо этого отображается исходный порядок массива «info».

Как говорится, как мне обновить обновление массива из дочернего компонента в том же файле?

Я пытался создать событие из фактического файла дочернего компонента, но это не такобновить родительский массив.

Компонент EmployeeList & Child (базовая таблица)

    <base-table 
    id="empTable"
    :data="info.filter(data => !search || 
    data.formattedName.toLowerCase().includes(search.toLowerCase()))" 
    :columns="columns" >
      <template slot="columns" > 
        <th>Full Name</th>
        <th>Work Email</th>
        <th>Title</th>
        <th> STATUS </th>
        <th class="text-right">Actions</th>
      </template>

      <template 
        slot-scope="{row}"
        v-if="
          typeof info != 'undefined' &&
          info != null &&
          info.length != null &&
          info.length > 0
           "
         >
       <td >
        <button class="buttonChange" @click="(t) =>viewInfo(t)">
           {{row.formattedName }} 
        </button>
       </td>
       <td>
        <button  class="buttonChange" @click="(t) =>viewInfo(t)">
           {{row.workEmail}}
        </button>
       </td>
        <td>
         <button  class="buttonChange" @click="(t) =>viewInfo(t)">
            {{row.title}}
         </button>
        </td>
        <td >
          <button  class="buttonChange" @click="(t) =>viewInfo(t)">
            {{row.activeORinactive}}
          </button>
        </td>
        <td class="td-actions text-right">
    <!-- Edit Employee -->
         <div id="wrapper">
          <base-button
            type="info"
            size="sm"
            icon
            class="animation-on-hover hover"
            @click="(e) =>editInfo(e)"
          >
            <i class="tim-icons icon-pencil"></i>  
          </base-button> 
           <p class="text">Edit</p>
         </div>
        </td>
      </template>

    </base-table> 

Сценарий

export default {
  components: {
    BaseTable,
    Modal,
    ModalView,

  },
  data() {
    return {
      columns: [],
      info: [],  
      infoModal: "",
      modal: false,
      modalView: false,
      refreshOnExit: 0,
      userEmail: null,
      signedIn: false,
      search: "", 
}  
  },
  methods: {
    async getList() {
      try { 
        const list = await axios.get(`MY API CALL`);
        this.info = list.data;
        this.info.sort(function(a, b) {
            var nameA = a.formattedName.toUpperCase(); 
            var nameB = b.formattedName.toUpperCase(); 
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }
            // names must be equal
            return 0;
          });
      } catch (e) {
        console.log(`getList`, e);
        if (e.response.status === 400) {
          this.error = e.response.data.message;
        }
      }
    },
    editInfo(e) {
      const tr = e.target.parentNode.parentNode.parentNode.parentNode.getAttribute("id");
      this.infoModal = this.info[tr];
      this.modal = true;
    },
    viewInfo(t) {
      const rw = t.target.parentNode.parentNode.getAttribute("id");
      this.infoModal = this.info[rw];
      this.modalView = true;
    }