Laravel – Livewire: Function not called when using wire:click directive after some code in Blade template

I’m working on a Laravel project that utilizes Livewire for interactive components. I have a Livewire component with a button that triggers a function when clicked using the wire:click directive. However, I’m encountering an issue where the function is not being called when the button is clicked if the wire:click directive is placed after some code in the component.

// blade component

<div>
    <tr class="text-center border-top">
        <td rowspan="4">{{ $product_name }}</td>
    </tr>
    <button wire:click ='add'> add</button>
    {{ $count }}
    <!-- Some code here -->
</div>

// function code

  public $count=0;
  public function add(){
    $this->count++;
     Log::info('Count incremented. New count: ' . $this->count);

  }