При использовании рендеринга списка Vue JS с фильтром поиска, как их можно расположить по дате?

Question

Я визуализировал список футбольных соревнований, используя VueJS List Rendering. Я также создал фильтр поиска, позволяющий пользователю искать футбольные события по названию события, а также по месту проведения.

Однако я пытаюсь получить массив в порядке дат по умолчанию и когда пользователь выполняет seacrh. Возможно ли это, поскольку я действительно борюсь. Любая помощь очень ценится.

Вот код, который у меня есть.

HTML

<div class="search-wrapper">
     <label class="sr-only">Search football.</label>
     <input :value='search'  @input='evt=>search=evt.target.value' id="search" type="search">
</div>

<li v-for="event in filteredSearch">
    <h2>{{event.eventName}}</h2>
    <p>{{event.eventLocation}}</p>
    <span>{{event.eventDateNumerical}}</span>
</i>

Тогда данные такие же, как ниже, но на отдельном JS file;

export default [
    {
        eventName: "Murphy Cup",
        eventLocation: "Brazil",
        eventDateNumerical: "20.08.2021",
    },
    {
        eventName: "Plate Throphy",
        eventLocation: "Thailand",
        eventDateNumerical: "07.01.2022",
    },
    {
        eventName: "The World Prize",
        eventLocation: "Russia",
        eventDateNumerical: "14.07.2021",
    },
];

Тогда мой фильтр такой, как показано ниже;

computed: {
  filteredSearch:function(){
    const filteredSearch = this.events.filter((event) => event.eventName.toLowerCase().match(this.search.toLowerCase()) ||  event.eventLocation.toLowerCase().match(this.search.toLowerCase()) )
    this.events.sort( ( a, b) => {
        return new Date(a.eventDateNumerical) - new Date(b.eventDateNumerical);
    });
    return filteredSearch
  }
},
methods: {
  even: function(arr) {
    // Set slice() to avoid to generate an infinite loop!
    return arr.slice().sort(function(a, b) {
      return a.position - b.position;
    });
  }
}