Problème pages dynamiques NuxtJS

Hello

J'essaye d'utiliser le concept de pages dynamiques dans Nuxt JS. Seulement voilà, lorsque je clique sur mon lien, rien ne se passe....

Dans NUXTJS, on peut faire des pages dynamiques selon la documentation. Donc en faisant une arborescence du genre
pages > events > _id.vue

Ainsi, je peux avoir accès à un évenement en particulier par son ID.
Le code de ma page events qui liste tous les events :

<template>
  <div>
      <EventCard v-bind:arrayEvents="events"></EventCard>

  </div>
</template>

<script>
import axios from "axios";
import EventCard from "../components/EventCard";

export default {
  name: "events",
  components: {EventCard},
  layout: "principal",
  data() {
    return {
      events: [],
      }

  },

  mounted() {
    this.getAllEvents();
  },
    methods: {

    //get all events in api

    getAllEvents() {
      axios.get(process.env.baseUrl + 'events')
        .then((res) => {
          console.log(res.data['hydra:member'])
          this.events = res.data['hydra:member']
          this.$store.commit("setListEvents", this.events)
        })
        .catch(err => console.log(err))

    }
  },
}
</script>

Le code de EventCard :

<template>
  <div class="container-ecm">
    <a-card hoverable v-for="(event,index) in arrayEvents" v-bind:key="index">
    <a-card-meta :title="event.name" :description="event.description | truncate(50)">
      </a-card-meta>
      <div>
        <nuxt-link v-bind:to="`/events/${event.id}`">
          <a-button type="secondary">
            S'inscrire
          </a-button>
        </nuxt-link>
      </div>
    </a-card>
  </div>
</template>
<script>
export default {
  name: "EventCard",
  props: {
    "arrayEvents": Array
  },
}
</script>

Le lien doit donc aller vers un évènement en particulier.
Mais, lorsque je clique sur le lien...rien ne se passe ! Je précise que l'URL change bien mais je reste sur la page avec la liste de mes events...

Qu'est ce que j'ai loupé ?
Merci de votre aide.

Je mets le code de la page _id.vue

<template>
  <h1>Event numéro {{id}}</h1>
</template>

<script>
export default {
  name: "_id",
  layout: "principal",
  data() {
    return {
      id: this.$route.params.id,
    }
  }
}
</script>