On Click - Attempt to read property "id" on array

Hello,

I have been going around in circles here. I am stuck...

I have a form that displays Attributes and Values. For example Size = Large, Medium, Small

There is a simple text box to add new Values to an existing Attribute.

However, as soon as I try and type in the Add Attribute Input, I get the error

Attempt to read property "id" on array

If I remove the Delete button off the form, everything works as expected, I can add a new Value. But I can't for the life of me see what the issue is with the Delete Button.

The issue is with

{{ $attVal->id }}

I don't know why. Perhaps it's something obvious.

Here is the form...

<div>
    <div class="my-3 border-solid border-4 flex flex-col">
        <div class="bg-gray-200 text-gray-700 px-2 py-2 text-sm text-meddium flex items-center justify-between">
            <span>Attribute Group</span>
        </div>


        <!-- Attribute -->
        <div class="px-4 py-2 border-b-4 border-solid">
            <x-input.group class="border-none" for="" label="Attribute:" :error="$errors->first('url')">
                <x-input.text wire:model.lazy="attribute.name" id="attr-{{ $attribute->id }}"
                    placeholder="Attribute Name" />
            </x-input.group>
        </div>


        <!-- Values -->
        <div class="px-4 py-2">
            @foreach ($attribute->value as $attVal)
                <x-input.group class="border-none" for="" label="Value:" :error="$errors->first('url')">
                    
                    <div class="flex">
                        
                        <span>{{ $attVal->id }}</span>

                        <x-input.text wire:model.lazy="attribute.value.{{ $loop->index }}.value" placeholder="Attribute Name" />
                
                        <x-button.danger
                            wire:loading.attr="disabled"
                            wire:loading.class="bg-gray-700 cursor-not-allowed"
                            wire:loading.class.remove="bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                            wire:loading.attr="disabled"
                            wire:click="deleteAttribute('{{ $attVal->id }}')">
                            Delete
                        </x-button.danger>
                
                    </div>
                
                </x-input.group>
            @endforeach
        </div>


        <!-- Add New Attribute Value -->
        <div class="px-4 py-2 border-t-4 border-solid">
            <x-input.group class="border-none" for="newAttributeValue" label="New Attribute Value:"
                :error="$errors->first('newAttributeValue')">

                <div class="flex">
                    <x-input.text wire:model="newAttributeValue.value" placeholder="Value" name="newAttributeValue" id="newAttributeValue" />

                    <x-button.primary
                        wire:loading.attr="disabled"
                        wire:loading.class="bg-gray-700 cursor-not-allowed"
                        wire:loading.class.remove="bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                        wire:loading.attr="disabled"
                        wire:click="addAttribute">
                        Add
                    </x-button.primary>
                </div>

            </x-input.group>
        </div>
        
    </div>
</div>

and here is the component

<?php

namespace App\Http\Livewire\Admin\Store;

use Livewire\Component;
use App\Models\ProductAttribute;
use App\Models\ProductAttributeValue;

class ProductAttributes extends Component
{
    public ProductAttribute $attribute;

    public $newAttributeValue;

    protected $rules = [
        'attribute.name' => 'required|min:2',
        'attribute.value.*.value' => 'required|min:2',
        'newAttributeValue.value' => 'required|min:1',
    ];

    public function mount(ProductAttribute $attribute)
    {
        $this->newAttributeValue = new ProductAttributeValue;
        $this->attribute = $attribute;
        $this->attribute->load('product', 'value');
    }

    public function render()
    {
        return view('livewire.admin.store.product-attributes');
    }

    public function deleteAttribute($id)
    {
        $attributeValue = $this->attribute->value()->where('id', $id)->firstOrFail();
        $attributeValue->delete();
        $this->attribute->refresh();
    }

    public function addAttribute()
    {
        $this->attribute->value()->create([
            'value' => $this->newAttributeValue->value,
            'product_id' => $this->attribute->product->id,
        ]);

        $this->newAttributeValue = "";
        $this->attribute->refresh();
    }
}