when I try to use Myanimelist api from rapidapi with vue.js it doesn’t work

I’m trying to learn Vue.js. I’m new and I’ve started making a clone of MyAnimeList to practice. I’m attempting to display the title, but nothing seems to be working. Can someone help me, please?

Here’s the API link: https://rapidapi.com/felixeschmittfes/api/myanimelist

this is the page

<template>
    <div class="topAnime">
      <h1>Top anime</h1>
      <div class="card">
        <CardComponent v-for="anime in animes" :key="anime.id" :animeInfo="anime"/>
      </div>
    </div>
</template>

<script setup>
import CardComponent from "../components/CardComponent.vue";
import { onMounted, ref } from "vue";

const animes = ref([])

onMounted(() => {
const url = 'https://anime-db.p.rapidapi.com/anime?page=1&size=10';
const options = {
    method: 'GET',
    headers: {
        'x-rapidapi-key': '5ba5251626msh61775206ad42e40p1981dbjsn73e0574f7887',
        'x-rapidapi-host': 'anime-db.p.rapidapi.com'
    }
}

fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    animes.value = data.contents
})
.catch((error) => console.error('problem fetching the videos', error))
})
</script>

<style scoped>
a {
  color: black;
  text-decoration: none;
}
</style>

this is the card component

<template>
    <div class="">
        <h2>{{ animeInfo.animes.title }}</h2>
    </div>
</template>

<script setup>
defineProps ({
    animeInfo: Object
})
</script>

<style scoped>

</style>

I tried multiple things with and Fetch to see if I made a mistake, but I didn’t succeed.