How do i get an id from my routings vue3.2.19 vuerouter4.0.12

Hey im building an podcast website with vue and laravel i want to get an different inlay player in another website via i frame so thats, but now i created for that a new route in laravel and vue-router but everytime i use my functions it says id is not defined. Im doing it with composition api.

this is my function which i import from another file

import {ref} from "vue";

export default async function useSeasons()  {
    const seasons = ref([])
    async function getSeasons(id) {
        let response = await axios.get(`/api/seasons/${id}/tracks`)
        seasons.value = response.data.data
    }
     return {
         seasons, getSeasons
     }
}

This is my function in the Template…

<script>
import useSeasons from "../../getSeasons";
import {onMounted} from "vue";
export default {
    name: "Player",
    props: {
        id: {
            type: String,
            required:true,
        }
    },
    setup(props) {
        const {seasons, getSeasons} = useSeasons()
        console.log(id)
        onMounted(getSeasons(props.id))

        return {
            seasons,
            getSeasons
        }
    }
}
</script>

And the adjustment for the router

export const routes = [
    {
        path: '/',
        component: SeasonComponent
    },
    {
        name: 'track.show',
        path: '/season/:id',
        component: Track,
    },
    {
        path: '/player/:id',
        component: PlayerBlack,
        props: true,
    },
]

An Update im getting the id send as an prop state but tzhen it gives me an warning.

[Vue warn]: Unhandled error during execution of setup function at <PlayerBlack id=“5” onVnodeUnmounted=fn ref=Ref< undefined > > at at at app.js:16911:17

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at Vue Issue Helper at <PlayerBlack id=“5” onVnodeUnmounted=fn ref=Ref< undefined > > at at at