Rendering components in v-for issue - vuejs2

Question

I'm having trouble to figure out how Vue 2 is rendering components within a v-for directive.
Here is a simplified snippet of what I'm working on, a light virtual scroll table.
Codepen
<div id="app">
<div #wheel.prevent="onWheel">
<table>
<tbody>
<tr v-for="item of visibleItems"
:key="item.id">
<td>{{ item.id }}</td>
<td><input :value="item.name"/></td>
</tr>
</tbody>
</table>
</div>
</div>
new Vue({
el: "#app",
data: {
start: 0,
count: 10,
},
computed: {
items() {
return [...Array(100).keys()]
.map((i) => i + 1)
.map((i) => ({
id: i,
name: `Item ${i}`,
}))
},
visibleItems() {
return this.items.slice(this.start, this.start + this.count)
}
},
methods: {
onWheel(event) {
if (event.deltaY < 0)
this.start = Math.max(0, this.start - 1)
else if (event.deltaY > 0)
this.start = Math.min(this.items.length - this.count, this.start + 1)
},
}
})
With this code, when I scroll up, only the top rows are rendered, leaving the others untouched, but when I scroll down, each row is re-rendered.
The node rendering can be seen in navigator console, the nodes are highlighted when they change.
The thing is, I have inputs in the second column, when one is focused and I scroll up, the focus remains, but when I scroll down, because the row is rendered, the input loose it's focus.
Why all rows are rendered instead of only the ones at the end ? How could I tell Vue to render only the new rows ?