[Vue] How to access url query parameters in a component?

I have the following code:

routes.js:

{
  name: 'event-detail',
  path: '/event-detail/',
  component: EventDetailPage,
  beforeEnter: checkAuth
},

events:

<template>
  <f7-page class="events" name="events">
    <div class="page-content">
      <f7-link href="/event-detail/?eventId=46" class="menu-button">Detail</f7-link>
    </div>
  </f7-page>
</template>

event-detail.vue:

<template>
  <f7-page class="event-detail" name="event-detail">
    <div class="page-content">
      eventId: {{ eventId }}
    </div>
  </f7-page>
</template>
...
computed: {
  eventId() {
    return this.$route.query.eventId;
  }
}

How can I access the eventId parameter inside event-detail.vue? this.$route is undefined, even if I rewrite eventId() as an arrow function.

See Ăștils part in docs.