components/EventList.vue

const EventList = {
 props: {
    events: Array,
 },
 template: `
    <div class="event-list">
      <h2>Upcoming Events</h2>
      <ul>
        <li v-for="event in events" :key="event.id">
          <h3>{{ event.title }}</h3>
          <h4>{{ event.date }}</h4>
          <p>{{ event.description }}</p>
          <button @click="handleEventClick(event.id)">Book Now!</button>
        </li>
      </ul>
    </div>
 `,
};

export default EventList;