How to implement partial rendering in Vue.js?

Question

Vue.js

The application has an array of objects.

var objects = [{id:1, title: 'One'}, {id:1, title: 'Two'}, {id:1, title: 'Three'}];

There is also a component for an object with its own template.

Vue.component(
'item', 
{ props: ['model'], 
  template: '<div>{{model.id}}, {{model.title}}</div>'
});

The list is rendered as One of the application's methods adds an object. Accordingly, the entire list is redrawn. The same as when removing an object from the list. And working somewhere on the second scroll, the user is thrown to the top of the page. How can I make sure that not the entire sheet is redrawn, but only the template of a specific component instance? And, accordingly, avoid being thrown to the top of the page. Thank you. Thank you.
<item v-for="model in Models" :model="model"/>
objects.push( new { id:4, title: 'Four' } );

Answer 1

It's not in vain that the documentation says about :key