Why can't DOM be reused in this case?

[dddssw]

Hi, I have a question about reusing dom

For example, I have a Array, I divide it into 4 columns and add the sub-items in the array to these columns one by one,

<div v-for="(col, colIndex) in columns" :key="colIndex">
  <div v-for="item in col" :key="item.id">
    <ItemComponent :item="item" />
  </div>
</div>

After that,I divide it into 3 columns and add the sub-items in the array to these columns one by one

Because the sub-items in the array are the same, the DOM should be reusable

But now the DOM will not be reused

As far as I understand it, the diff algorithm will only compare the same layer

Is there no other way to reuse it?

[dddssw]

Reuse partly
playground