在 Laravel 中排序的集合在 Vue 中突然不再排序

在Laravel中我有一个名为"垃圾"的简单模型，它的迁移如下所示:

Schema::create('garbages', function (Blueprint $table) {
    $table->id();
    $table->date('disposal_at');
    $table->timestamps();
});

在我的Laravel路由(web.php)中，路由如下所示:

Route::get('/garbage', function() {
    $garbages = \App\Models\Garbage::all()
        ->sortBy('disposal_at');

    // dd($garbage);

    return Inertia::render('Grabage', [
        'garbages' => $garbages
    ]);
});

如你所见，我只是得到我所有的垃圾记录，按‘disposal_at’对它们进行分类，然后将其传递给Inertia::render.

现在我想通过VUE显示列表中的所有记录，文件如下所示:

<script setup lang="ts">
    interface Garbage {
        id: number,
        disposal_at: string
    }

    const props = defineProps<{
        garbages: Garbage[]
    }>();
</script>

<template>
    <ul>
        <li v-for="garbage in garbages" :key="garbage.id">
            {{ garbage.disposal_at }}
        </li>
    </ul>
</template>

输出如下所示:

• 2002-08-19
• 2002-06-05
• 1995-07-18
• 1978-12-21
• 1989-07-12
• 1975-09-06
• 2000-03-01
• 2012-06-04
• 2022-11-09
• 2006-04-10

现在我的问题是，虽然我按"disposal_at"对集合进行了分类，但在传递给vue的Inertia::render()之后，它又再次按id分类了.

我已经在laravel路由中通过dd($garbage)显示了值，以查看它是否在那里排序，这给了我按"disposal_at"排序的集合，但在Vue中，它不再按"disposal_at"排序.

为什么会发生这种情况，我如何修复它？