Преобразование заголовка параметра маршрута Vue в идентификатор

Я создаю веб-сайт курса, и у каждого курса есть собственная страница. Допустим, я открываю курс №1, тогда ссылка http://localhost:8080/course/1. Я хочу изменить его на http://localhost:8080/course/course-name-here. Моя проблема в том, что когда я меняю параметр, данные не извлекаются из API.

index.js

{
    path: '/courses',
    name: 'Courses',
    component: () => import(/* webpackChunkName: "about" */ '../views/Courses.vue')
},
{
    path: '/course/:id',
    name: 'CourseDetail',
    props: true,
    component: () => import(/* webpackChunkName: "about" */ '../views/CourseDetail.vue')
}

CourseList.vue

<v-row>
   <v-col sm = "6" md = "4" v-for = "course in courses" v-bind:key = "course.courseId">
      <router-link v-bind:to = "{name: 'CourseDetail', params: {id: course.courseTitle}}" class = "text-decoration-none">
         <VerticalCard v-bind:course = "course"/>
      </router-link>
   </v-col>
</v-row>

CourseDetail.vue (скрипт)

import axios from 'axios'
export default {
  props:['id'],
  data: function(){
    return {
      singleCourse: null,
      selectedIndex: null,
      showPage: false
    }
  },
  methods: {
    getData() {
      var that = this
      axios.get('http://my-api-here.amazonaws.com/v1/api/course?id=' + this.id,
            {
              headers: {
                'Authorization' : 'Bearer ' + this.$store.state.authKey 
              }
            })
            .then(function(response) {
              that.singleCourse = response.data.body
            })
      },
      show() {
        if (this.$store.state.isLogin == true){
          this.showPage = true
        }
        else {
          this.$router.replace('/login')
        }
      }
  },
  mounted: function() {
    this.getData()
    this.show()
  }
}

пример одиночного курса

{ "_id": { "$oid": "5fc63dab36d8491476999831" }, 
"courseTitle": "Python For Everybody", 
"createdDate": { "$date": 1606852635135 }, 
"creator": "Admin", 
"courseId": 1, 
"courseDesc": "Description Lorem Ipsum is simply dummy text of the printing", 
"courseCategory": "Programming", 
"courseImage": "https://cwpwp2.betterthanpaper.com/wp-content/uploads/2019/06/2-1-1.jpg", 
"syllabus": [ { "chapterName": "Introduction to Python 3 Programming Tutorial", "chapterVideo": "eXBD2bB9-RA" }] }