Dynamically filter data and display them in Vue.js

I receive some data from an api and I want to display them on a website, divided by date.

What I want to achieve :

15 Feb Wed

Object 1 : data X, data Y
Object 2 : data X, data Y

16 Feb Thu

Object 3 : data X, data Y
Object 4 : data X, data Y

etc.

An if a new object appears in the list, it is automatically inserted to the right place?

events.data is an array of objects. Each object is an event structured like so :

_id: "63e1330539560eaef2612f84"​​​​​​
event_date: "2023-02-16T14:00:00.000Z"​​​
event_link: "/testLink"​​​
event_name: "TestName"
price: 12

What I tried :

<div v-for="date in datesList" :key="date.id">
    <div>{{ date }}</div>
    <div class="dateSeparator"></div>
    <div v-for="event in events.data" v-bind:key="event._id">
        <div v-if="event.event_date == date">
            ...data X, data Y...

As for the script :

var datesList = []

events.data.forEach(event => {
  if (!datesList.includes(event.event_date)) {
    datesList.push(event.event_date)
  }
})

Problem :
An empty div is created for each event for each date.

Question :
What would be the best way to achieve the desired result ?
How can I pre-filter the events based on their date in order to get rid of the v-if ?

Solution I made :
A function that filters my data by the date needed.

const filterByDate = (date) => {
  let filteredEvents = []
  events.data.forEach(event => {
    if (event.event_date == date) {
      filteredEvents.push(event)
    }
  })
  return filteredEvents
}

Changed the v-for :

<div v-for="event in filterByDate(date)" v-bind:key="event._id">

Your code looks fine to me. I did not see any issue in the implementation you have as per the data you shared. I just added a live demo below (In Vue 2 format just to show the behavior), You can change it to Vue 3 as per your requirement.

Live Demo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

new Vue({
  el: '#app',
  data: {
    events: {
      data: [{
        _id: "63e1330539560eaef2612f84",
        event_date: "2023-02-16",
        event_link: "/testLink",
        event_name: "TestName 1",
        price: 12
      }, {
        _id: "63e1330539560eaef2612f85",
        event_date: "2023-02-17",
        event_link: "/testLink",
        event_name: "TestName 2",
        price: 12
      }, {
        _id: "63e1330539560eaef2612f86",
        event_date: "2023-02-16",
        event_link: "/testLink",
        event_name: "TestName 3",
        price: 12
      }, {
        _id: "63e1330539560eaef2612f87",
        event_date: "2023-02-17",
        event_link: "/testLink",
        event_name: "TestName 4",
        price: 12
      }]
    },
    datesList: []
  },
  mounted() {
    this.events.data.forEach(event => {
      if (!this.datesList.includes(event.event_date)) {
        this.datesList.push(event.event_date)
      }
    })
  }
})

<!-- language: lang-css -->

.date-container {
  border: 1px solid black;
  margin: 10px;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(date, index) in datesList" :key="index" class="date-container">
    <div>{{ date }}</div>
    <hr>
    <div v-for="event in events.data" v-bind:key="event._id">
      <div v-if="event.event_date === date">
        {{ event.event_name }}
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->