How to move columns from the-table-column, Elerment UI, and vuedraggable?

问题

i have the next table:

<data-tables :data="dataTable" :pagination-props="{ pageSizes: [5, 10, 15] }">
            <draggable v-model="headers" tag="tr">
                <el-table-column  v-for="title in titles" :prop="title.prop" :label="title.label" :key="title.label">
                </el-table-column>
            </draggable>
</data-tables>

to which I am trying to apply draggable to move the columns, as well as this example: https://sortablejs.github.io/Vue.Draggable/#/table-column-example

I have no idea how it should go in the model to display the data

data(){
return:{
 dataTable:
            [
                {
                    "content": "Water flood",
                    "flow_no": "FW201601010001",
                    "flow_type": "Repair",
                    "flow_type_code": "repair",
                }, 
                {
                    "content": "Lock broken",
                    "flow_no": "FW201601010002",
                    "flow_type": "Repair",
                    "flow_type_code": "repair",
                }, 
                {
                    "content": "Help to buy some drinks",
                    "flow_no": "FW201601010003",
                    "flow_type": "Help",
                    "flow_type_code": "help"
                }
            ],
            headers: ["id", "name", "sport"],
             titles:
            [
                {
                    prop: "flow_no",
                    label: "NO."
                }, 
                {
                    prop: "content",
                    label: "Content"
                }, 
                {
                    prop: "flow_type",
                    label: "Type"
                }
            ],
  }
}

来源：https://stackoverflow.com/questions/62290034/how-to-move-columns-from-the-table-column-elerment-ui-and-vuedraggable