Getting Undefined property: Illuminate\View\AnonymousComponent::$id
I was trying to get the id from my loop here but I'm getting this undefined property issue even thought fetching this id inside the x-data attribute actually works. I'm just receiving this issue when using the :href inside the x-filament::link.
```
@foreach ($components as $component)
<div x-data="{ id: {{ $component->id }}, display_order: {{ $component->display_order }}, get myId() { return this.id }, }" x-sortable-handle x-sortable-item="{{ $component->id }}" data-id="{{ $component->id }}" class="py-2 bg-gray-50 px-4 shadow-md items-center cursor-move flex">
<div class=""> @svg('heroicon-o-bars-3', 'w-4 h-4 inline') {{ $component->name }} </div>
<div class="">
{{$component->id}}
<x-filament::link :href="route('filament.admin.resources.components.edit', $component->id)" target="_blank">
Edit
</x-filament::link>
</div>
</div>
@endforeach
```
@foreach ($components as $component)
<div x-data="{ id: {{ $component->id }}, display_order: {{ $component->display_order }}, get myId() { return this.id }, }" x-sortable-handle x-sortable-item="{{ $component->id }}" data-id="{{ $component->id }}" class="py-2 bg-gray-50 px-4 shadow-md items-center cursor-move flex">
<div class=""> @svg('heroicon-o-bars-3', 'w-4 h-4 inline') {{ $component->name }} </div>
<div class="">
{{$component->id}}
<x-filament::link :href="route('filament.admin.resources.components.edit', $component->id)" target="_blank">
Edit
</x-filament::link>
</div>
</div>
@endforeach
