Почему отсортированная коллекция (Laravel) неверно отображает порядок в компоненте (Vue.js)?

Господа. Что-то я под вечер нормально так завис. Вообщем суть проблемы.

Имеем коллекцию атрибутов, которая на беке сортируется по полю ‘position’. На беке все отлично, коллекция сортируется правильно, по нужному полю.

Биндю коллекцию в компонент vue, прогоняю перебор, а она выводится в порядке по полю ID. Из компонента прилетает неверно отсортированный объект. В компонент прилетает правильное, на выходе получаем неправильное… Это что за самодеятельность??? И что самое обидное, такую логику с позиционированием использовал нираз, все верно было, а тут дичь прям какая-то.

Код:

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'));
}

Дебаг:

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

Бинд:

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

И вот что прилетает в компонент:

    attributesData: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"

Ну и сам перебор, что б не было сомнений, там все банально:

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

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

Vue.component('attributes-component', {
    props: ['attributes'],
    computed: {
        getAttributes() {
            return JSON.parse(this.attributes);
        },
        getTableHeadKeys() {
            return Object.keys(this.getAttributes[0]);
        }
    },
    template: `
    <div class="attributes-component">
        <table>
            <thead>
                <tr>
                    <th v-for="(key, index) in getTableHeadKeys" :key="index">{{ key }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="attribute in getAttributes" :key="attribute.id">
                    <td v-for="(value, index) in Object.values(attribute)" :key="index">{{ value }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    `
});

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
    el: "#app",
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

table th, table td {
   border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <attributes-component attributes='[{"attribute_group_id":1,"display_in_filter":1,"id":1,"name":"Размер экрана","position":1,"sorting_type":"alphanumeric","value_type":"text"},{"attribute_group_id":1,"display_in_filter":1,"id":4,"name":"Расширение экрана","position":2,"sorting_type":"numeric","value_type":"text"},{"attribute_group_id":1,"display_in_filter":1,"id":3,"name":"Цвет корпуса","position":3,"sorting_type":"position","value_type":"color"}]' />
</div>