Liveware inputs not updating state

<div
    x-ignore
    ax-load
    ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('braintree-payment') }}"
    x-data="braintreePayment({
        state: {
            clientToken: '{{ $clientToken }}',
            isLoaded: false,
            paymentAttempt: false,
            user: {
                givenName: '{{ $first_name }}',
                surname: '{{ $surname }}'
            }
        }
    })"
>
<div x-show="state.isLoaded && !state.paymentAttempt">
    <div>
        <x-filament-forms::field-wrapper class="rounded-lg" id="name" required="required" label="Name">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.givenName"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

        <x-filament-forms::field-wrapper class="rounded-lg" id="surname" required="required" label="Surname">
            <x-filament::input.wrapper>
                <x-filament::input
                    type="text"
                    x-bind:value="state.user.surname"
                    required
                />
            </x-filament::input.wrapper>
        </x-filament-forms::field-wrapper>

import dropIn from "braintree-web-drop-in";

export default function braintreePayment({
      state,
    }) {
    return {
        state,

        init: function () {
            console.log(this.state);
            this.state.isLoaded = true;
            ....