How to use Alpine in Filament?

namespace App\Filament\Pages;

class MyPage extends Page implements HasForms
{
    use InteractsWithForms;

    public string $my_text_input = 'Hello, World!';
    public string $another_text_input = 'How are you?';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('my_text_input'),
                TextInput::make('another_text_input'),
            ]);
    }
}

<x-filament-panels::page>
  
    <script>
        document.addEventListener('alpine:init', () => {
            console.log('Alpine initialized'); // It works

            Alpine.data('my_text_input', ({ state }) => ({
                state,

                init() {
                    console.log(this.state) // Doesn't work
                },
                onclick() {
                    console.log(this.state) // Doesn't work
                },
                change() {
                    console.log(this.state) // Doesn't work
                },

        })
    </script>

    {{ $this->form }}

</x-filament-panels::page>