I am trying to render certain components which are present in an array using component tag of Vue js.

<div v-for="(arr, index) in compArray">
    <component v-bind:is="arr.name" :key="arr.name+index" :index="index"></component>
</div>

data() {
  compArray: [{name: "Abc"}, {name: "Xyz"}]
}

I am able to add new elements to this compArray and which will increase the components that are rendered. But when i am deleting, there is an issue with UI (data). Like, if there are 3 components and all three are having data property count.

Suppose for first element rendered this count is 4, for second it is 5 and for third it is 2. Then if i delete the second element from the compArray using slice method, data shown is still 5. In ideal case it should be 2, since middle one has been deleted.

What can be the issue behind this? Any help is appreciated