Why does a sorted collection (Laravel) display the order in a component incorrectly (Vue.js)?

Question

Laravel

Lord. Something in the evening I normally hung like that. Basically the crux of the problem.

We have a collection of attributes, which is sorted on the back by the 'position' field. Everything is fine on the back, the collection is sorted correctly, by the required field.

I bind the collection to the vue component, run the iteration, and it is displayed in order by the ID field. An incorrectly sorted object arrives from the component. The correct one arrives in the component, the output is incorrect ... What kind of amateur performance is this ??? And what is most offensive, I used such logic with positioning niraz, everything was right, but here it’s just some kind of game.

The code:

public function edit(int $attributeGroupId, AttributeGroupRepository $attributeGroupRepository)
{
    $attributeGroup = $attributeGroupRepository->findAttributeGroupById($attributeGroupId);
    $attributes = $attributeGroup->attributes->sortBy('position');

    return view('admin.pages.attributes.attribute-groups.edit', compact('attributeGroup', 'attributes'));
}

Debug:

Illuminate\Database\Eloquent\Collection {#1473 ▼
  #items: array:3 [▼
    0 => App\Entity\Attributes\Attribute {#1527 ▼
      ...
      #attributes: array:7 [▼
        "id" => 1
        "attribute_group_id" => 1
        "name" => "Размер экрана"
        "value_type" => "text"
        "sorting_type" => "alphanumeric"
        "position" => 1
        "display_in_filter" => 1
      ]
      ...
    }
    2 => App\Entity\Attributes\Attribute {#1525 ▼
      ...
      #attributes: array:7 [▼
        "id" => 4
        "attribute_group_id" => 1
        "name" => "Расширение экрана"
        "value_type" => "text"
        "sorting_type" => "numeric"
        "position" => 2
        "display_in_filter" => 1
      ]
      ...
    }
    1 => App\Entity\Attributes\Attribute {#1526 ▼
      ...
      #attributes: array:7 [▼
        "id" => 3
        "attribute_group_id" => 1
        "name" => "Цвет корпуса"
        "value_type" => "color"
        "sorting_type" => "position"
        "position" => 3
        "display_in_filter" => 1
      ]
      ...
    }
  ]
}

Bind:

<attributes-component  v-bind:attributes="{{ json_encode($attributes) }}"/>

And this is what arrives in the component:

attributes:Object
  0:Object
    attribute_group_id:1
    display_in_filter:1
    id:1
    name:"Размер экрана"
    position:1
    properties:Array[7]
    sorting_type:"alphanumeric"
    value_type:"text"
  1:Object
    attribute_group_id:1
    display_in_filter:1
    id:3
    name:"Цвет корпуса"
    position:3
    properties:Array[0]
    sorting_type:"position"
    value_type:"color"
  2:Object
    attribute_group_id:1
    display_in_filter:1
    id:4
    name:"Расширение экрана"
    position:2
    properties:Array[0]
    sorting_type:"numeric"
    value_type:"text"

Well, the enumeration itself, so that there would be no doubt, everything is trite there:

<div v-for="attribute in attributes" :key="attribute.position" class="card">

Answer 1

Well... As they say, the morning is wiser than the evening... It completely slipped my mind that when sorting Lara's collections, the key-value relationship is preserved. And if we end the expression with the sortBy() method, then everything is fine for php, but since our collection flies into the arms of JS, then the fun begins.
Here is the expanded json that flies into the vue component, and what JS does with it =)))
Json string:

"0":{
    "id":1,
    "attribute_group_id":1,
    "name":"\u0420\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430",
    "value_type":"text",
    "sorting_type":"alphanumeric",
    "position":1,
    "display_in_filter":1,
    "properties":[]
},
"2":{
    "id":4,
    "attribute_group_id":1,
    "name":"\u0420\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430",
    "value_type":"text",
    "sorting_type":"numeric",
    "position":2,
    "display_in_filter":1,
    "properties":[]
},
"1":{
    "id":3,
    "attribute_group_id":1,
    "name":"\u0426\u0432\u0435\u0442 \u043a\u043e\u0440\u043f\u0443\u0441\u0430",
    "value_type":"color",
    "sorting_type":"position",
    "position":3,
    "display_in_filter":1,
    "properties":[]
}

Pay attention to the object keys, 0, 2, 1
And here is what we have on parsing in JS:

"0":{
    "id":1,
    "attribute_group_id":1,
    "name":"Размер экрана",
    "value_type":"text",
    "sorting_type":"alphanumeric",
    "position":1,
    "display_in_filter":1,
    "properties":[]
},
"1":{
    "id":3,
    "attribute_group_id":1,
    "name":"Цвет корпуса",
    "value_type":"color",
    "sorting_type":"position",
    "position":3,
    "display_in_filter":1,
    "properties":{
    }
},
"2":{
    "id":4,
    "attribute_group_id":1,
    "name":"Расширение экрана",
    "value_type":"text",
    "sorting_type":"numeric",
    "position":2,
    "display_in_filter":1,
    "properties":{
  }
}

That's it. The solution is ridiculously simple:

$attributes = $attributeGroup->attributes->sortBy('position')->values()->all();

Thanks everyone for trying to help! As they say, you need to periodically read the document ... Take a quick glance ...