Проблемы с реализацией функции избранного в Laravel 5.7, Vue.js & Axios

Question

Я пытаюсь реализовать «любимую систему» ​​в моем приложении LMS.Пользователи могут избранные и избранные курсы, нажав на значок сердца.Поэтому при загрузке просмотра моих курсов каждая карточка курса отображается с выделенным значком сердца, если он еще не добавлен, или с полным значком сердца, если он предпочтителен.

Моя проблема заключается в том, что когда я нажимаю на значок сердца, чтобы добавить его в избранноеили удалить курс, я получаю следующую ошибку на консоли:

POST http://localhost:8888/online_learning/public/favorite/32 404 (Not Found)

На вкладке сети это сообщение об ошибке:

message: "No query results for model [App\Course].",…}
exception: "Symfony\Component\HttpKernel\Exception\NotFoundHttpException"
file: "/Applications/MAMP/htdocs/online_learning/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line: 200
message: "No query results for model [App\Course]."

В моей базе данных у меня есть следующие таблицы:

1. курсы (идентификатор, имя, созданный_at, updated_at)
2. пользователи (идентификатор, имя, созданный_at, updated_at)
3. избранное (идентификатор, идентификатор_курса, идентификатор_пользователя, созданный_кат, обновленный_ат)

Вот как я определил свои модели:

- Модель курса:

public function favorited()
    {
        return (bool) Favorite::where('user_id', auth()->id())
            ->where('course_id', $this->id)
            ->first();
    }

- Модель пользователя:

  public function favorites()
    {
        return $this->belongsToMany(Course::class, 'favorites', 'user_id', 'course_id')->withTimeStamps();
    }

Маршруты

Route::post('/favorite/{course}', 'CourseController@favoriteCourse');
Route::post('/unfavorite/{course}', 'CourseController@unFavoriteCourse');

My vue.js Любимый компонент:

<template>
    <span>
        <a class="wish_bt" href="#" v-if="isFavorited" @click.prevent="unFavorite(course)">
            <i  class="icon_heart" ></i>
        </a>
        <a class="wish_bt" href="#" v-else @click.prevent="favorite(course)">
            <i  class="icon_heart_alt"></i>
        </a>
    </span>
</template>

<script>
    export default {
        props: ['course', 'favorited'],

        data: function() {
            return {
                isFavorited: '',
            }
        },

        mounted() {
            this.isFavorited = this.isFavorite ? true : false;
        },

        computed: {
            isFavorite() {
                return this.favorited;
            },
        },

        methods: {
            favorite(course) {
                axios.post('/favorite/'+course)
                    .then(response => this.isFavorited = true)
                    .catch(response => console.log(response.data));
            },

            unFavorite(course) {
                axios.post('/unfavorite/'+course)
                    .then(response => this.isFavorited = false)
                    .catch(response => console.log(response.data));
            }
        }
    }
</script>

Контроллер курса:

  public function favoriteCourse(Course $course)
    {

        auth()->user()->favorites()->attach($course->id);

        return back();
    }

    public function unFavoriteCourse(Course $course)
    {

        auth()->user()->favorites()->detach($course->id);

        return back();
    }

Так я называю свой vue.jsлюбимый компонеnt из моего курса Blade View:

@if (auth()->check())
    <favorite
      :course={{ $course->id }}
      :favorited={{ $course->favorited() ? 'true' : 'false' }}> 
    </favorite>
@endif

Мой файл app.js:

Vue.component('favorite', require('./components/Favorite.vue'));

Есть идеи, как решить эту проблему?заранее спасибо.