The prop value turns to "app" when I pass it to the component - VueJS

when I pass the "id" value to my Artist page through router-link it from a number it turns into the string "app".

In the main page:

<router-link :to="{ name: 'Artist', params: { id: artist.id } }">
    <w-flex class="column align-center">
        <div class="cardImage xs12">
            <img :src="baseUrl + artist.avatar.url" />
        </div>
        <p class="title2 pt4">
           <b></b>
        </p>
    </w-flex>
</router-link>

In the linked view:

export default {
  name: "Artist",
  props: ["id"],
  data() {
    return {
      artist: {},

...

async fetchArtist() {
  const res = await fetch(
    `${baseAPI}/artists?id=` + this.id + "",
    {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    }
  ).then((response) => response.json());

Of course, I cannot fetch anything because the URL is wrong.

It should be ${baseAPI}/artists?id=5 but it's ${baseAPI}/artists?id=app