I am using element-ui-el-table-draggable to obtain the draggable effect.

My table is rendered by the following code, and can be dragged to change the order of the rows.

        <p class="p-3" v-if="departmentlist">
          <ElTableDraggable>
            <el-table
              stripe
              class="table-responsive table"
              header-row-class-name="thead-light"
              :data="departmentlist"
              @row-click="row_clicked_event">
              <!-- <el-table-column label="ID" prop="IDn">
                <template v-slot="{ row }">
                  {{ row.IDn }}
                </template>
              </el-table-column> -->
              <el-table-column label="PLU" prop="PLU" :key="PLU"> </el-table-column>
              <el-table-column :label="$t('Name') + '1'" prop="Name1" :key="$t('Name') + '1'">
              </el-table-column>
              <el-table-column :label="$t('Name') + '2'" prop="Name2" :key="$t('Name') + '2'">
              </el-table-column>
              <el-table-column :label="$t('Sort Order')" prop="SortOrder" :key="$t('Sort Order')">
              </el-table-column>
              <el-table-column :label="$t('Remarks')" prop="Remarks" :key="$t('Remarks')">
              </el-table-column>
            </el-table>
          </ElTableDraggable>
        </p>
        <p class="p-3" v-else>
          {{ $t("No Records") }}
        </p>

However, every time the page is refreshed, the order will revert to its original state. This is because the 'Sort Order' has never been changed after I dragged and moved a row.

What can be done so that every time when a row is moved, I can call a method?