How to move columns in a table?

Question

Vue.js

What I want to do is to transfer columns to tables, let's say it's implemented in exel. If you take the entire column and move it, let's say from "B" to "A", then the entire column will be transferred along with the data. It’s a little unclear how this is done in vue, and the logic is approximately unclear how it should look like, so that it is transferred and the state of the columns is preserved.
My sandbox without the implementation itself https://codesandbox.io/s/pyvjxxnnvj
in the App.vue:27 file, if I add the draggable attribute from the https://github.com/SortableJS/Vue.Draggable library, then I can only transfer the column header , not the entire column.
Example

<thead>
                <tr>
                    <th><input type="checkbox" v-model="selectAll" @click="select"></th>
                    <draggable>
                      <th v-for="column in columns" @click="sortBy(column.name)">{{ column.label }}</th>
                    </draggable>
                </tr>
            </thead>

Then I will get the following result

Like an analogue of this https://akottr.github.io/dragtable/, only on vue