Table sorting with sortablejs and assigning index to object

What you're getting is due to the way Vue.js works : Every time the model is updated, the view is immediately updated taking the change in the model into account .

Each row of your list has as its model an object within the arraydata. In your code, each time you move a row, you vary the order of the arraydata elements by changing the contents of one index to another, which is not detected byVue . For it to Vuedetect the change you must vary the array, for example, applying a splice. Therefore, with this operation the model is not changed and therefore the view is not updated. I will try to describe the process of your code by points:

1 - When you move a Andrés Garcíafrom position 4 to position 1, you have a loop that goes through the arraydata loop and places Andrés Garcíafirst inside it, that is:

índice 0 del array (Carlos Sánchez) ----> (Andrés García)
índice 1 del array (Luis Chong) --------> (Carlos Sánchez)
índice 2 del array (Rosario Carranza) --> (Luis Chong)
índice 3 del array (Andrés García) -----> (Rosario Carranza)

2 - But Vueit has not detected this change, for Vuethe view in row 4 (now first in the list) it still has index 3 of the array. Namely:

Fila 1 (Andrés García) -----> el modelo es el índice 3 del array
Fila 2 (Carlos Sánchez) ----> el modelo es el índice 0 del array
Fila 3 (Luis Chong) --------> el modelo es el índice 1 del array
Fila 4 (Rosario Carranza) --> el modelo es el índice 2 del array

3 - Then comes the code that you are trying to do that goes through each element of arrayand varies the parameter order, that is, you change the model of each row.

4 - By varying the model of each row, Vueupdate the view:

Fila 1 --> índice 3 del array (Rosario Carranza)
Fila 2 --> índice 0 del array (Andrés García)
Fila 3 --> índice 1 del array (Carlos Sánchez)
Fila 4 --> índice 2 del array (Luis Chong)

In my opinion, the logic of varying the order of the elements inside the arrayis superfluous, there is no need to update this order since it is being done directly in the DOMcon sortable.js. Look at the following starting code with no logic yet to update the number of order.:

https://codepen.io/elchininet/pen/WzqVax

To update the property orderof each row, a solution could be to have a arraywith the numbers of orderand vary the position of these numbers within the arraydepending on the order given to the rows of the table. Then the parameter orderof each row could be updated taking into account the position that each has orderwithin the mentioned array. Something like that:

const createSortable = (el, options, vnode) => {

    // Copiar la propiedad order
    vnode.context.data.forEach( (obj) => {obj.norder = obj.order} );

    // Crear un array de orders
    const orders = vnode.context.data.map((obj) => obj.order);

    return Sortable.create(el, {
        ...options,
        onEnd: function (evt) {

            const data = vnode.context.data;      
  
            // Actualizar la posición de los orders
            orders.splice(evt.newIndex, 0, ...orders.splice(evt.oldIndex, 1));
  
            // Variar el order de cada fila
            data.forEach((obj) => {        
                obj.order = orders.findIndex((n) => n === obj.norder) + 1;
            });
  
        }
    });
};

Here is a working example:

https://codepen.io/elchininet/pen/JLQqEV

EDIT: Another solution I have given you on SOen

This solution consists of saving the order of the items before starting to drag a row and once the row has been moved, restore the order to the initial state and only then apply an spliceal arrayto Vueupdate the view:

const createSortable = (el, options, vnode) => {

    let order = [];

    return Sortable.create(el, {
        ...options,
        
        onStart: function (evt) {
            // when the sort starts, store the initial order of the array
            order = this.toArray();
        },

        onEnd: function (evt) {
            
            // when the sort ends, set the order to the initial state
            this.sort(order);

            // change the order using splice
            const data = vnode.context.data;
  
            data.splice(evt.newIndex, 0, ...data.splice(evt.oldIndex, 1));

            // now it is safe, you can update the order parameter
            data.forEach((o, i) => {
                o.order = i + 1;
            });

        }

    });

};

Working example: https://codepen.io/elchininet/pen/MVNaON