ColReorder does not work correctly when Vue.js Components are used

It seems that if you use ColReorder + Vue.js components they are not movable with each other. The header moves but the content stays the same.

Findings:

• Simple columns are always movable.
• If you have 1 Vue.js component and other simple columns - all of the are movable.
• If you have 2 Vue.js components they can not switch places with other Vue.js components but they can switch places with other simple columns.

Preview:

<script setup>
const columns = ref([
  {
    data: 'a',
    title: 'One',
    render: '#comp'
  },
  {
    data: 'b',
    title: 'Two Two',
    render: '#comp'
  },
  {
    data: 'c',
    title: 'Three Three Three',
    render: '#comp'
  },
]);

const options = {
  colReorder: true,
};
</script>
<DataTable
      class="display"
      :columns="columns"
      :data="data"
      :options="options"
      ref="table"
    >
      <template #comp="props">{{ props.cellData }} </template>
    </DataTable>

Example:
https://stackblitz.com/edit/datatables-net-vue3-reactive-tmmaxz?file=src%2FApp.vue

P.S. I am writing this issue in the https://github.com/DataTables/Vue/ because I think the issue might be in "DataTables/VueJS" side not in "DataTables/ColReorder". Let me know if I should move it to "DataTables/ColReorder"

Start by reproducing the issue in the linked StackBlitz example with DataTables/Vue and ColReorder enabled. Inspect the DataTables/Vue integration and the ColReorder interaction to determine why two Vue component columns cannot exchange places. Done means component columns can reorder with each other and their content remains aligned with the headers.