How to make checkbox not move in drag and drop?

Question

Vue.js

I use the library https://github.com/SortableJS/Vue.Draggable
In my example I use this code

/src/views/App.vue:65
<thead>
        <draggable
          v-model="columns"
          :element="'tr'"
          :options="{ animation: 150, draggable: '.draggable' }"
        >
          <th
            v-for="column in columns"
            @click="sortBy(column.name);"
            v-show="!column.disabled"
            :class="{ draggable: column.name !== 'isActive' }"
          >
            <input
              v-if="column.name === 'isActive'"
              type="checkbox"
              v-model="selectAll"
              @click="select"
            />
            {{ column.label }}
          </th>
        </draggable>
      </thead>

I have not yet found in the library that certain columns are not mixed. For example, if you take the "Name" column and try to move it to the checkbox, then the columns will move between each other.
And the second point, is it somehow possible that when you move, the animation is moving not in thead, but in the whole column? If it is not clear, then by holding the button we move the column to another place, then thead moves and the entire column stands still. And after you pressed the mouse button, the entire column pulled up.
https://codesandbox.io/s/pyvjxxnnvj
The screenshot will make it clearer what problems I mean