vue-карусель с динамическими данными

карусель с данными из базы не может отображаться

данные из базы были получены, просто они не могут отображаться в пользовательском интерфейсе

<b-row>
                    <div class="card-carousel-wrapper">
                        <div class="card-carousel--nav__left" v-on:click="moveCarousel(-1)" :disable="atHeadOfList"></div>
                        <div class="card-carousel">
                            <div class="card-carousel--overflow-container">
                                <div class="card-carousel-cards" :style="{transform:'translateX'+'('+currentOffset+'px'+')'}">
                                    <div class="card-carousel-card" :v-for="field in fieldlist">
                                        <div class="card-carousel--card-header">{{fieldlist.value}}</div>
                                        <div class="card-carousel--card"  :v-for="schedule in schedulelist">
                                            <div class="btn button" :class="classStatus()" v-on:click="classStatus(3)" :disable="disableButton(2)">{{schedulelist.start_time}}-{{schedulelist.end_time}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-carousel--nav__right" v-on:click="moveCarousel(1)" :disable="atEndOfList"></div>
                    </div>
                </b-row>

<script>

            loadSchedule(){
                axios({
                    url: 'bookings/schedule/list/',
                    method:'PUT',
                    data:{
                        id_field:this.selectedField
                    }
                }).then(response=>{
                    this.schedulelist = response.data.serve
                }).catch(error=>{
                    console.log(error);                    
                });
            },
loadLocation(){
                let index=0;
                axios({
                    url: '/location',
                    methods:'GET',
                }).then(response=>{
                    this.locationList = response.data.serve
                    for (index=0; index< this.locationList.length; index++) {
                        this.location.push({value: this.locationList[index].id_location, text: this.locationList[index].location_name})
                    }
                    console.log(this.location);
                }).catch(error=>{
                    console.log(error);
                })
            },
            loadField(){
                let index=0;
                axios({
                    url: '/field/data/'+this.selectedLocation,
                    methods:'GET',
                }).then(response=>{
                    console.log(response);

                    this.fieldlist = response.data.serve
                    this.field = []
                    for (index=0; index< this.fieldlist.length; index++) {
                        this.field.push({value: this.fieldlist[index].id_field, text: this.fieldlist[index].field_name})
                    }                    
                }).catch(error=>{
                    console.log(error);
                })
            },
</script>

данные из результатов loadfield отображаются в виде заголовков на карточке, а данные из результатов loadchedule отображаются в виде кнопок на карточке