vue draggable problem when fix first column i can't move column - vue.js

Question

vue draggable problem when fix first column i can't move column how i can solve this problem
I have a table of 4 columns, one column has a static list of values ​​and the next column I need to be draggable so that I can move the cells in the second column etc without affecting the first column.
<script>
import draggable from 'vuedraggable'
export default {
name: "table-column-example",
components: {
draggable
},
data() {
return {
headers: ["id", "name", "sport"],
list: [
{ id: 1, name: "Abby", sport: "basket" },
{ id: 2, name: "Brooke", sport: "foot" },
{ id: 3, name: "Courtenay", sport: "volley" },
{ id: 4, name: "David", sport: "rugby" }
],
dragging: false
};
}
};
</script>
<style scoped>
.ghost {
opacity: 0.5;
background: #fb1b27;
}
</style>
<template>
<div class="row">
<div class="col-8">
<h3>Draggable table</h3>
<table class="table table-striped">
<thead class="thead-dark">
<draggable :list="headers" v-model="headers" :options="{draggable:'.item'}" tag="tr">
<th>#</th>
<th class="item" v-for="header in headers" :key="header" scope="col">
{{ header }}
</th>
</draggable>
</thead>
<tbody>
<tr v-for="item in list" :key="item.name">
<td>dddddd</td>
<td v-for="header in headers" :key="header">{{ item[header] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>