How to retrieve number data types from models?

Question

So far I've been retrieving data from my model like so:

Gallery.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Gallery extends Model
{
    use HasFactory;

    protected $fillable = ['text'];
}

web.php:

Route::get('/gallery', function () {
    $data = Gallery::all();
    return inertia('gallery', ['data' => $data]);
});

gallery.vue:

const props = defineProps({
    data: Array
})

This is possible because Inertia does some magic routing under the hood, so that the response is passed directly to props inside the vue component. It retrieves the data but table parameters like id are returned as String in the vue component instead of int, like it is recorded in the database.

gallery.vue shows:

Vue warn]: Invalid prop: type check failed for prop "id". Expected Number with value 1, got String with value "1". 

How do I retrieve the right data type from the model?

Edit:

I've defined the prop for id in a child component of gallery.vue:

const props = defineProps({
    id: Number
})