Passing data from custom field via action to the backend

$getAction('addComponent', ['data' => 'how do i pass data to the action?']) }} 

@vite('resources/css/app.css')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<x-dynamic-component
        :component="$getFieldWrapperView()"
        :field="$field"
>

    <div x-data="
    {
        state: $wire.$entangle(@js($getStatePath())),

    }
    "
         x-init="Sortable.create($refs.list,{animation:350})"
    >
    {{ $getAction('addGridColumn') }}

    <span class="bg-red-500" x-text="state.maxCols"></span>
    <div x-ref="list" class="grid gap-2" :style="`grid-template-columns: repeat(${state.maxCols}, minmax(0, 1fr))`">
        <template x-for="(col, index) in state.columns" wire:key="index">
                <div class="justify-center border-1 w-full border-b-gray-100 rounded p-4 gap-2">
                    <p x-text="col.uuid"></p>
                    {{ $getAction('addComponent', ['data' => 'how do i pass data to the action?']) }}
                </div>
        </template>
    </div>
</div>
</x-dynamic-component>