I have recently used Vue in a project, but during the development process I discovered that when I delete an element in the array, the elements behind the element will not be re-rendered.

The html code is as follows:
There are two components: one is the Main component, used to contain all content containers; the other is the sub-component, used to display content.

js code is as follows:

Then there is also a Vuex store:

Normally speaking, when deleting a sub-container, you should be able to directly use splice, the overridden method of arrays in vue, to delete it.
like:

   state.Content.splice(i,1);

But after using it, I found that after deleting an element, the elements behind this element will be reloaded and not re-rendered, and the vue logic in the page is not executed normally.

After trying various methods, there is still no solution. It seems that when the element is deleted, the subscript of the subsequent element changes, causing the content in the element to be reloaded but not rendered.

So my final solution was, as shown in the picture above, not to delete the element directly, but to use

state.Content.splice(i,1,null);

method sets the elements in the array to empty without changing the arrangement of the array, thus ultimately solving the problem.
But this solution can only treat the symptoms but not the root cause, and cannot answer my questions very well.
So I would like to ask all the experts, Is there any better way to solve it?