V-for not working in bs-stepper

[nelson1995]

I'm using vue.js and I tried to loop through items and displayed their value as titles on bs-stepper. Unfortunately bs-stepper prints the steps in a vertical format instead of a horizontal format. Where did i go wrong ?

<div v-for="(category,index) in categories" :key="category.id">
                <div class="bs-stepper">
                    <div class="col-md-10">
                        <div class="d-flex justify-content-center">
                            <div class="bs-stepper-header mb-4">
                                    <div class="step" :data-target="'#step'+index+'-view'">
                                        <button type="button" class="btn step-trigger" :class="{'active': step >= index}">
                                            <span class="bs-stepper-circle"><i class="fa fa-check"></i></span>
                                            <br>
                                            <span class="bs-stepper-label">{{category.name}}</span>
                                        </button>
                                    </div>
                                <div class="line" :class="{'active': step >= index }"></div>
                            </div>
                        </div>
                    </div>
                    <div class="bs-stepper-content"></div>
                </div>
           </div>
       </div>
</div>