Getting the value of a nested x-data

I have a form with nested an x-data where the child has a dynamic dropdown. After fetching the data, I get null values after submitting the parent x-data.

I did some googling and found some suggestions about using Alpine.store(). I couldn't figure out, how to implement it

My form

<form action="{{ route('store.swap') }}" method="post" x-data="swapAsset" @submit.prevent="store">
            @csrf
            <div class="max-w-full rounded overflow-hidden shadow-lg border border-gray-900">
                <div class="p-6">
                    <div class="font-bold text-xl mb-2">Swap from</div>
                    <div class="mt-1">
                        <select id="getcoin" name="coin" autocomplete="coin-name"
                                x-data="fetchTokenBalance()" @change="fetch_token_balance" x-model="formData.coin"
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option hidden>Choose</option>
                            @foreach ($userAssets as $up)
                                <option id="getcoin{{ $up->id }}" value="{{ $up->id }}">{{ $up->token_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mt-4">
                        <x-input
                            type="text"
                            id="amount"
                            x-model="formData.amount"
                            x-text="formData.amount"
                            name="amount"
                            class="block mt-1 w-full"
                            :value="old('amount')"
                            placeholder="0.00"/>
                    </div>
                    <a class="text-sm text-gray-600 hover:text-gray-900" href="javascript:void(0)">
                        {{ __('Max') }} <span id="maxValue"></span>
                    </a>
                </div>
            </div>

            <div class="max-w-full rounded overflow-hidden shadow-lg border border-gray-900">
                <div class="p-6">
                    <div class="font-bold text-xl mb-2">Swap to</div>
                    <div class="mt-1">
                        <select
                            id="tocoin"
                            name="tocoin"
                            x-model="formData.tocoin"
                            class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                        >
                            @foreach ($wallets as $wallet)
                                <option value="{{ $wallet->id }}">{{ $wallet->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="mt-8 mb-6 ">
                <x-button class="w-full py-4 px-6 text-center" style="display: block">Swap Assets</x-button>
            </div>

        </form>

The Child x-data works fine but the parent x-data return null

swapAsset function

function swapAsset() {
     return {
       formData: {
        'coin': '',
         'amount': '',
        'tocoin': ''
     },
      msg: '',
      store(e) {
          e.stopImmediatePropagation();
         this.msg = ''

        axios.post("{{ route('store.swap') }}", {
          coin: this.formData.coin,
          tocoin: this.formData.tocoin,
          amount: this.formData.amount
        })
          .then((response) => {
            console.log(response);
           console.log('Test: '+this.formData.coin);
         })
        .catch((error) => {
           console.log(error)
           console.log('Error: '+this.formData.amount);
        })
    }
  }
}

function fetchTokenBalance() {
    return {
       formData: {
           coin: '',
        },
         fetch_token_balance(e) {
            e.stopImmediatePropagation();
            console.log(this.coin);

              axios.get('user/' + this.formData.coin, {
                coin: this.formData.coin
             }).then((response) => {
               console.log(response);
               const result = response.data;
               document.getElementById('maxValue').innerHTML = result.token_balance + ' ' + result.token_name

              document.getElementById("getcoin" +this.formData.coin).selected = "true"
           }).catch((error) => {
             console.log(error);
         })
      }
   }
}

            

$('#maxValue').on('click', () => {
    console.log($('#maxValue').text());
    let str = $('#maxValue').text();
    let str_without_token_name = str.split(' ');
    $("#amount").val(str_without_token_name[0]);
    console.log(str_without_token_name[0])
})