Self built Timepicker Vue JS Component functionality - vue.js

Question

I was wondering if anyone knows how to detect when the user hovers on the time selected, the time slot selected will ease scroll upwards to be vertically center aligned.
this is my first time building a complex timepicker. i would also need to have options such as time ranges (min - max)and have it as dynamic as possible. Just looking for ideas at the moment, not expecting a complex answer!
Please look at my fiddle to show you what i mean
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>