Im build project on forntend vue and backend django. I stuck with problem what i can't resolv. I trying to send data from ProjectsView.vue to ProjectDetailView.vue. Im trying to use props but i get error:

[Vue warn]: Missing required prop: "slug"

ProjectsView.vue don't send data to ProjectDetailView.vue and axios throw a error GET http://127.0.0.1:8000/api/v1/projectdetail/undefined/ 500 (Internal Server Error)

I can't find problem in this code.

this is my ProjectsView:

<template>
<div class="container d-flex d-xl-flex justify-content-xl-center">
    <div class="d-flex d-sm-flex d-md-flex d-lg-flex d-xl-flex justify-content-center flex-wrap justify-content-sm-center justify-content-md-center justify-content-lg-center justify-content-xl-center">
        <div v-for="prof in projects" v-bind:key="prof.id">
        <div class="card" style="width: 285px;height: 400px;margin: 5px;border-radius: 15px;">
              
                <div class="card-body text-center">
                    <img class="img-fluid" :src="prof.avatar" style="width: 150px;border-width: 1px;border-radius: 100px;" />
                    <h4 class="card-title">

                    <router-link
                    :to="{ name: 'projectdetail', params: { slug: prof.slug } }"
                    >{{ prof.title }}
                    </router-link>

                    <fa v-if="prof.is_online" icon="circle" data-bs-toggle="tooltip" title="Online" style="color: rgb(0,197,67);font-size: 12px;padding: 0px;margin-top: 0px;" /></h4>
                    <h6 class="text-muted card-subtitle mb-2">{{ prof.about }}</h6>
                    <h6 class="text-muted card-subtitle mb-2">{{ prof.last_online_at }}</h6>
                    <div v-if="prof.tahs">
                    <div class="d-inline-block" v-for="tag in prof.tahs.split(',')" v-bind:key="tag">
                        <span class="badge rounded-pill bg-secondary" style="margin: 1px;">{{tag}}</span>
                    </div>
                    </div>
                    <p class="card-text"></p><a class="card-link" href="#">Link</a><a class="card-link" href="#">Link</a>
                </div>
              
            </div>
        </div>
    </div>
</div>
</template>

<script>
import axios from 'axios'
import { useToast } from "vue-toastification";
import Project from '@/views/DetailProjectView.vue'

export default {
    
    name: 'Projects',
        setup() {
      // Get toast interface
      const toast = useToast();
      return { toast }
    },
    data() {
        return {
            projects: [],
            errors: [],
        }
    },
    mounted() {
        this.getItemsProjects()
    },

    components: {
    Project,
    
  },

    methods: {
        async getItemsProjects() {

            this.$store.commit('setIsLoading', true)

            axios
                .get('/api/v1/projects/')
                .then(response => {
                     this.projects = response.data
                     console.log(this.projects)

                })

                
                .catch(error => {
                    console.log(error)
                  
                })

                this.$store.commit('setIsLoading', false)


            
        },
        
    }
}
</script>

and this is my ProjectDetailView.vue

<template>
<div>working? {{slug}}
</div>

</template>

<script>
import axios from 'axios'
import { useToast } from "vue-toastification";

export default {
    
    name: 'Project',
        setup() {
      // Get toast interface
      const toast = useToast();
      return { toast }
    },
    data() {
        return {
            project: [],
            errors: [],
           
        }
    },
    mounted() {
        this.getItemsProjects()
    },

  props: {
    slug: {
      type: String,
      required: true,
    },
  },
    methods: {
        async getItemsProjects() {

            this.$store.commit('setIsLoading', true)

            axios
                .get(`/api/v1/projectdetail/${this.slug}`)
                .then(response => {
                     this.project = response.data
                     console.log(this.project)

                })

                
                .catch(error => {
                    console.log(error)
                  
                })

                this.$store.commit('setIsLoading', false)


            
        },
        
    }
}
</script>

and my router:

import { createRouter, createWebHistory } from 'vue-router'
import store from '../store'

import HomeView from '../views/HomeView.vue'
import Signup from '../views/SignupView.vue'
import Login from '../views/LoginView.vue'
import Dash from '../views/DashView.vue'
import Myacc from '../views/MyAccView.vue'
import Profile from '../views/ProfileView.vue'
import Projects from '../views/ProjectsView.vue'
import ProjectDetail from '../views/DetailProjectView.vue'


const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/signup',
    name: 'signup',
    component: Signup
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/dash',
    name: 'dash',
    component: Dash,
    meta: {
      requiredLogin: true
    }
  },
  {
    path: '/myacc',
    name: 'myacc',
    component: Myacc,
    meta: {
      requiredLogin: true
    }
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      requiredLogin: true
      
    }
  },

  {
    path: '/projects',
    name: 'projects',
    component: Projects,
    meta: {
      requiredLogin: true
    }
  },
  {
    path: '/project/:slug',
    name: 'projectdetail',
    component: ProjectDetail,
    
    meta: {
      requiredLogin: true,
    }
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiredLogin) && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

how to fix this bug? thank you for advice.. im new in vue

edit