vue.jsでfor文内のDOMを読み込む　→　違う要素を読み込んでしまう

今していること

Laravel5.5, vue.jsを使用し学校の予約システムを構築中

実現したいこと

サイドバー(◀　▶)押下
→スクロールして隠れた先生の部分が見えるようにする

問題点

9:0010:00
10:0011:00
11:0012:00
・
・
・
20:0021:00
とfor文でまわしている
→しかし例えば9:00~~10:00のsidebar(indexでいうと０の部分)を押すと、18:00~~19:00(index 10)の部分が反応する

「時間と実際に反応する部分のまとめ」
9~~10(index0) -> 18~~19(index10)
10~~11(index1) -> 19~~20(index11)
11~~12(index2) -> 20~~21(index12)
12~~13(index3) -> 9~~10(index0)
13~~14(index4) -> 14~~15(index1)
・
・
後は順に進んでいく。
index0, 1 ,2の場合、10, 11, 12が反応しており１の位が反応しているのか？？などと思っております。

コード

//スクロールボタンはcomponentを持つ
//emitで親にclick情報を渡す
Vue.component('scroll', {
    template:
    `
    <div id="scroll-bar">
        <div id="left" @click="leftSlide">◀</div>
        <div id="right" @click="rightSlide">▶</div>
    </div>
    `
    ,
    data(){
        return{
            scrollX : 0
        }
    },
    methods : {
        leftSlide(){
            this.$emit('left-button');
        },
        rightSlide(){
            this.$emit('right-button');
        }
    }
})

//blade部分(省略部分有)
<li v-for="(row,timeIndex) in rows">
    <div v-if="row.time_id == timeIndex && typeof row.reserved_teacher !== 'undefined'>
       //省略
    <div v-else class="teachers border" id="teachers" ref="scrollBox">
        <ul>
            <li>
                <div v-for="teacher in row.teachers" v-if="teacher.user_id == null" class="teacher text-center">
                    <div class="teacher-img">
                        //写真
                    </div>
                    @{{teacher.teacher.name}}<br>
                    //予約ボタン
                </div>
            </li>
        </ul>
        <scroll @left-button="leftSlide(timeIndex)" @right-button="rightSlide(timeIndex)"></scroll>
    </div>
</li>

//vue.js method部分
leftSlide : function(timeIndex){
    this.$refs.scrollBox[timeIndex].scrollLeft -= 300;
},
rightSlide : function(timeIndex) {
    this.$refs.scrollBox[timeIndex].scrollLeft += 300;
}

method部分にconsole.logなど追記して調べておりますが、何が原因かわからず困っております、よろしくお願いいたします。

回答を受けての追記

https://ginpen.com/2016/12/16/vue-mounted/
このサイトを参考にマウント時にscrollBoxを下記のように読み込もうとしましたが、undefinedになりました。　このアプローチのやり方もできるようになっておこうと思うのですが、undefinedの理由がわからず困っております。
よろしくお願いいたします。

data: {
    refs : [],
},
mounted() {
    this.scrollBox = this.$refs.scrollBox
},

行動規範の内容に同意します

回答1件

v-for内でrefを用いた場合、$refsの配列の順番は保証されないらしいです。

v-for, refs and access to refs.<array of components> by array index after Array.unshift - GitHub

前の回答の例のようにscrollコンポーネントにslotを用意して子ノードを表示できるようにし、

js
1leftSlide : function(timeIndex){
2    this.$refs.scrollBox[timeIndex].scrollLeft -= 300;
3},
4rightSlide : function(timeIndex) {
5    this.$refs.scrollBox[timeIndex].scrollLeft += 300;
6}