Собственная функциональность Timepicker Vue JS Component

Question

Мне было интересно, если кто-нибудь знает, как определить, когда пользователь наводит курсор на выбранное время, выбранный временной интервал упростит прокрутку вверх, чтобы выровнять по центру по вертикали.

я впервые строю сложный таймер. Мне также нужно иметь такие параметры, как временные диапазоны (мин. - макс.) и иметь его как можно более динамичным. Просто ищите идеи в данный момент, не ожидая сложного ответа!

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

    new Vue({
      el: "#app",
      data: {
        current: null,
        testList:
        [
          {
            id: 1,
            time: '11.00'
          },
          {
            id: 2,
            time: '11.15'
          },
          {
            id: 3,
            time: '11.30'
          },
          {
            id: 4,
            time: '11.45'
          },
          {
            id: 5,
            time: '12.00'
          },
          {
            id: 6,
            time: '12.15'
          },
          {
            id: 7,
            time: '12.30'
          },
          {
            id: 8,
            time: '13.00'
          },
          {
            id: 9,
            time: '13.15'
          },
          {
            id: 10,
            time: '13.30'
          },
          {
            id: 11,
            time: '13.45'
          },
        ]
      },
      methods: {
      	setCurrent(key)
        {
          this.current = key;
        }
      },
      beforeMount() {
        this.current = 3;
      },
    })

    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }

    #app {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      transition: all 0.2s;
    }

    .selectTime2 {
      height: 136px;
      overflow-y: auto;
      list-style: none;
      padding: 0;
      max-width: 172px;
      width: 100%;
      margin: 50px auto;
    }

    .selectTime2::-webkit-scrollbar {
        width: 0;
      }
      
      .timeSlot {
        text-align: center;
        color: #ECF1F2;
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .selected {
        color: #679198;
        font-size: 24px;
        font-weight: bolder;
        position: relative;

      }

      .light {
        color: #ACC6CB;
        font-size: 18px;
      }

      .lighter {
        color: #ECF1F2;
        font-size: 14px;
      }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    <div id="app">
    <h1>
    On hover select time component
    </h1>
      <ul class="selectTime2">
                    <li v-for="test in testList"
                        @mouseover="setCurrent(test.id)"
                        class="timeSlot"
                        :class="{'selected': current === test.id, 'light': current === test.id+1 || current === test.id-1, 'lighter': current === test.id+2 || current === test.id-2}"
                    >{{ test.time }}
                    </li>
                </ul>
    </div>