Cashier-Paddle - Conditional Livewire component not working in production

[DanjBethel]

Using a simple blade if statement to show either the monthly or annual version of a paddle livewire button.
In my dev environment it works fine. However in my staging and production environments, it only works on initial page load. When I switch from annual to monthly, the button stops working completely.

Any help would be greatly appreciated! Code below

  @if($annualPlan)
                        <x-paddle-button
                                data-discount-id="{{ config('services.paddle.annual_discount_id') }}"
                                :checkout="$plan->annualCheckout()"
                                class="mt-6 block rounded-md {{ $loop->index == 1 ? 'bg-primary-600 text-white hover:bg-primary-500' : 'text-primary-600 ring-1 ring-primary-300 hover:ring-primary-600' }} px-3 py-2 text-center text-sm font-semibold leading-6  shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                            Choose plan
                        </x-paddle-button>
                    @else
                        <x-paddle-button
                                :checkout="$plan->monthlyCheckout()"
                                class="mt-6 block rounded-md {{ $loop->index == 1 ? 'bg-primary-600 text-white hover:bg-primary-500' : 'text-primary-600 ring-1 ring-primary-300 hover:ring-primary-600' }} px-3 py-2 text-center text-sm font-semibold leading-6  shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
                            Choose plan
                        </x-paddle-button>
                    @endif

[DanjBethel]

Just bumping incase anyone can help me