Фильм-фильтр с использованием jQuery и Vue.js

Question

Я пытаюсь создать фильтр JavaScript, который будет сортировать фильмы, аналогично настройке, которую вы можете увидеть на amazon.com и так далее.

Используя php / Laravel в конце, я создаю серию div, каждый из которых содержит фильм. Когда пользователь устанавливает флажок (например, в жанре фильма), все фильмы, не относящиеся к этому выбранному жанру, будут удалены.

Я использую это как проект, чтобы научить себя laravel, jquery и vue.js, но работа с внешним интерфейсом JavaScript поставила меня в тупик, и я действительно мог бы использовать некоторую помощь. Заранее спасибо.

HTML / Php для флажков:

@foreach( $genres as $genre )
    <label class="form-check"> 
        <input class="form-check-input" id="genre" value="{{ $genre }}" type="checkbox" v-model="checked" @click="genreSearch()">
        <span class="form-check-label">{{ $genre }}</span>
    </label>
@endforeach 
<span>You've Checked: @{{ checked }} </span>

HTML / Php для фильмов

                 @foreach ($movies as $movie)           
                    <div class="card mb-2 {{ $movie->genre }}" id="{{ $movie->genre }}">
                        <div class="row no-gutters">
                            <div class="col-auto">
                                <a href="/movies/{{ $movie->id }}"><img src="{{ $movie->url }}" class="img-fluid" width="300px" height="100px" style="height: 400px;"></a>
                            </div>
                            <div class="col">
                                <div class="card-block px-2">
                                    <h5 class="card-title mb-0"><strong>{{ $movie->title }}</strong></h5>
                                    @php $rating = $movie->rating->avg('rating'); @endphp

                                    @foreach(range( 1,5 ) as $i )
                                        <span class="fa-stack" style="width: 1em;">
                                            <i class="far fa-star fa-stack-1x"></i>
                                            @if( $rating > 0 )
                                                @if( $rating > 0.5 )
                                                    <i class="fa fa-star starred fa-stack-1x"></i>
                                                @else
                                                    <i class="fa fa-star-half fa-stack-1x"></i>
                                                @endif
                                            @endif
                                            @php $rating--; @endphp
                                        </span>
                                    @endforeach
                                    <h6 class="card-subtitle mt-2 mb-2 text-muted">By: {{ $movie->publisher }}</h6>
                                    <h6 class="card-subtitle mb-2 text-muted">Released: {{ $movie->released }}</h6>
                                    <p>{{ $movie->description }}</p>
                                    <div class="row ml-0">
                                        <a href="/movies/{{ $movie->id }}" class="badge badge-primary pt-2 pb-2 px-3 mr-2">Details</a>
                                        <a href="/movies/{{ $movie->id }}/ratings" class="badge badge-primary pt-2 pb-2 px-1 mr-2">Ratings &nbsp
                                            <span class="badge-light px-1">{{ $movie->rating->count() }}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

JavaScript:

<script>    
    var genreFilter = new Vue({
        el: '#genres',
        data: {
            checked: []
        },
        methods: {
            genreSearch: function () {
                $( "#Fantasy" ).toggle(function() {
                    alert( "First handler for .toggle() called." );
                }, function() {
                    alert( "Second Handler for toggle().called." );
                });

            }
        }
    });
</script>