laravel vuejs belongsToMany checkbox

I am using Laravel and front page is rendered by VueJS. Company has many courts court has many sports(using pivot table)

http://crm.jywebsoft.com/admin/company/edit/1

I am developing a page for editing company. at the bottom of the page, courts belonging to company is showing (draggable).

At the sports section in the court

<draggable class="row" v-model="courts" :options="{handle:'.sort-handler'}">
<div class="col-md-4" v-for="(court, index) in courts" :key="court.id">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12 sort-handler" style="cursor: move;"><span class="pull-left"><i class="fa fa-reorder fa-lg"></i></span>
                    <button class="btn btn-danger btn-sm pull-right" @click.prevent="courts.splice(index,1)"><i class="fa fa-remove"></i></button>
                </div>
                <div class="form-group col-lg-12">
                    <label for="example-email-input1" class="col-form-label">Court Name</label>
                    <div class="">
                        <input type="hidden" :name="'courts['+index+'][id]'"
                               :value="court.id>0?court.id:''"/>
                        <input class="form-control" type="text" :name="'courts['+index+'][name]'" v-model="court.court_name" placeholder="">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="example-email-input1" class="col-form-label">Description</label>
                    <div class="">
                        <input class="form-control" v-model="court.description" :name="'courts['+index+'][description]'" type="text" placeholder="">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="example-email-input1" class="col-form-label">Price</label>
                    <div class="">
                        <input class="form-control" v-model="court.price" type="text" :name="'courts['+index+'][price]'" placeholder="">
                    </div>
                </div>
                <div class="form-group col-lg-12">
                    <label for="example-email-input1" class="col-form-label">Sports</label>
                    <div class="">

                        <div class="" v-for="(sport, index_sport) in sports" :key="sport.id">
                            <div class="">
                                <input type="checkbox" class="" :id="'courts_'+index+'_'+sport.name"
                                       :name="'courts['+index+'][sports][]'" data-parsley-multiple="groups" data-parsley-mincheck="2"
                                       v-model="court.sports" :value="sport"
                                >
                                <label class="" :for="'courts_'+index+'_'+sport.name">@</label>
                            </div>
                        </div>
                        <select class="form-control" v-model="court.status" :name="'courts['+index+'][status]'">

                        </select>
                    </div>
                </div>

                <div class="form-group col-lg-12">
                    <label for="example-email-input1" class="col-form-label">Status</label>
                    <div class="">
                        <select class="form-control" v-model="court.status" :name="'courts['+index+'][status]'">
                            <option value="1">Active</option>
                            <option value="2">Delete</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

How can i check sports belonging to each courts?