PUT request from AlpineJS and dynamic property with a child component

Hello,

I'm trying to use AlpineJS to trigger a PUT request to update a model without refreshing the page.

Here is my code.

// my editor blade component

<div class="w-full flex flex-col gap-1">
    <label for="{{ $attributes->get('id') }}" class="text-sm text-neutral-dark italic empty:hidden">
        {{ $slot }}
    </label>

    <div x-data="setupEditor('{{ $attributes->get('value') }}')">
        <template x-if="isLoaded()">
            <div class="transition-all px-3 py-2 space-x-1 border border-b-0 border-gray-300 rounded-t-lg">
                <button
                    x-on:click.prevent="toggleBold()"
                    class="transition-all w-8 border border-gray-300 hover:border-gray-500 rounded"
                >
                    <i class="fa-solid fa-bold"></i>
                </button>

                <button
                    x-on:click.prevent="toggleItalic()"
                    class="transition-all w-8 border border-gray-300 hover:border-gray-500 rounded"
                >
                    <i class="fa-solid fa-italic"></i>
                </button>

                <button
                    x-on:click.prevent="toggleBulletList()"
                    class="transition-all w-8 border border-gray-300 hover:border-gray-500 rounded"
                >
                    <i class="fa-solid fa-list-ul"></i>
                </button>

                <button
                    x-on:click.prevent="toggleOrderedList()"
                    class="transition-all w-8 border border-gray-300 hover:border-gray-500 rounded"
                >
                    <i class="fa-solid fa-list-ol"></i>
                </button>
            </div>
        </template>

        <textarea class="hidden" x-ref="textarea" {{ $attributes->except('value') }} rows="10"></textarea>

        <div
            class="h-80 overflow-y-auto border border-neutral-light focus:border-primary rounded-b-lg"
            x-ref="editor"
        >
        </div>
    </div>

    @error($attributes->get('name'))
        <x-ui.error>{{ $message }}</x-ui.error>
    @enderror
</div>

// the comment blade component

@props([
    'article',
    'comment',
])

<div
    class="space-y-4 px-6 py-4 rounded-xl border border-neutral-light"
    x-data="{
        showForm: false,
        body: @js($comment->body),
        save: () => {
            axios.put('{{ route('articles.comments.update', compact('article', 'comment')) }}', { body: this.body })
                .then(response => {
                    console.log('Commentaire enregistré avec succès', response.data);
                })
                .catch(error => {
                    console.error('Erreur lors de l'enregistrement du commentaire :', error);
                });
        },
    }"
>
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
            <div class="size-8 rounded-full overflow-hidden">
                <x-ui.avatar :url="$comment->user->image_url"></x-ui.avatar>
            </div>

            <div class="text-sm italic text-neutral-dark">
                Rédigé par {{ $comment->user->firstname.' '.$comment->user->lastname }} le {{ $comment->created_at->format('d/m/Y') }}
            </div>
        </div>

        <div class="flex items-center gap-2">
            @can('update', $comment)
                <div x-on:click.prevent="showForm = true">
                    <x-ui.button-as-link type="button">
                        <div class="text-lg">
                            <x-ui.icons.edit-icon></x-ui.icons.edit-icon>
                        </div>
                    </x-ui.link>
                </div>
            @endcan

            @can('delete', $comment)
                <form method="POST" action="{{ route('articles.comments.destroy', compact('article', 'comment')) }}">
                    @csrf
                    @method('DELETE')

                    <x-ui.button-as-link type="submit" :danger="true">
                        <div class="text-lg">
                            <x-ui.icons.delete-icon></x-ui.icons.delete-icon>
                        </div>
                    </x-ui.button-as-link>
                </form>
            @endcan
        </div>
    </div>

    <div class="text-justify" x-show="!showForm" x-html="body"></div>

    <div
        x-show="showForm"
    >
            <div class="flex flex-col gap-4">
                <x-ui.editor id="body" name="body" value="{!! old('body', $comment->body ?? null) !!}">Commentaire</x-ui.editor>

                <div class="flex items-center gap-4">
                    <x-ui.button type="submit">
                        Enregistrer
                    </x-ui.button>

                    <x-ui.button type="button" :inverse="true" x-on:click.prevent="showForm = false">
                        Annuler
                    </x-ui.button>
                </div>
            </div>
    </div>
</div>

I get this error in the console.

Alpine Expression Error: missing ) after argument list

Expression: "{
        showForm: false,
        body: 'body',
        save: () => {
            axios.put('http://localhost:8000/articles/01k5f77cyybjdbhm34k1symzf3/comments/01k5gtfggyymedqxvz9253kr1k', { body: this.body })
                .then(response => {
                    console.log('Commentaire enregistré avec succès', response.data);
                })
                .catch(error => {
                    console.error('Erreur lors de l'enregistrement du commentaire :', error);
                });
        },
    }"

If I remove this part of the code (have a look just below), I don't get any error any more, but sure I need this part of the code.

.then(response => {
    console.log('Commentaire enregistré avec succès', response.data);
})
.catch(error => {
    console.error('Erreur lors de l'enregistrement du commentaire :', error);
});

Here is my questions : what am I doing wrong to get this error ?

And another question : not tested yet, given that I get this error, but is the body variable updated each time I update the textarea with the current code ? I don't think so.

Thanks for your help.

V