I have a form coupled with AlpineJS.

<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm"
>

I want the x-data details, first_name and last_name to be available in a global function.

One option is to retrieve the data via this.$data and other option is to pass the form data (which should be an array or an object) as an argument to the global function.

Passing the data as an object or as an array would reduce sending lots of arguments if there are, like, 30 or so variables.

Option 1: Get the data as this.$data

let submitForm = function()
{        
    const xData = this.$data;

    const first_name = xData.first_name;
    const last_name = xData.last_name;

    console.log("First Name:", first_name);
    console.log("Last Name:", last_name);
};

Option2: Send the data as an argument to the function.

let submitForm = (data) =>
{
    console.log("data = ", data);
};

But this is only if x-data is defined as x-data="{ xData: { first_name: '', last_name: '' }}" and the submit handler includes the argument - @submit.prevent="submitForm2(xData)".

<form
x-data="{ first_name: '', last_name: '' }"
method="POST"
@submit.prevent="submitForm1"
>
        <label>
            First Name:
            <input type="text" x-model="first_name" />
        </label>
        <label>
            Last Name:
            <input type="text" x-model="last_name" />
        </label>
        <button type="submit">Submit</button>
    </form>
    <script>
    let submitForm1 = function()
    {        
        const xData = this.$data;

        const first_name = xData.first_name;
        const last_name = xData.last_name;

        console.log("First Name:", first_name);
        console.log("Last Name:", last_name);
    };
    </script>

    <form
    x-data="{ xData: { first_name: '', last_name: '' }}"
    method="POST"
    @submit.prevent="submitForm2(xData)"
    >
        <label>
            First Name:
            <input type="text" x-model="xData.first_name" />
        </label>
        <label>
            Last Name:
            <input type="text" x-model="xData.last_name" />
        </label>
        <button type="submit">Submit</button>
    </form>
    <script>
    let submitForm2 = (data) =>
    {
        console.log("data = ", data);
    };
    </script>

    <script defer src="https://unpkg.com/alpinejs@3.12.3/dist/cdn.min.js"></script>

Online Demo: https://anjanesh.s3.amazonaws.com/demo/alpine/alpinejs-form-data.html