Alpine Expression Errors: vimeoComponent and state Undefined in Custom Component

I'm working with Alpine.js and encountered several errors related to expressions in my custom component. Specifically, I get the following errors in my browser's console:

Error 1: Alpine Expression Error: vimeoComponent is not defined Expression: vimeoComponent({ state: $wire.entangle('data.vimeo_id').defer, id: '', domain: '' })

Error 2: Alpine Expression Error: state is not defined Expression: JSON.stringify({ state, status })

Error 3: Alpine Expression Error: state is not defined Expression: state === null

Error 4: Alpine Expression Error: state is not defined Expression: state !== null && status !== 'transcoding'

I attempted to define a vimeoComponent inside the alpine:init event to ensure it's available before Alpine uses it. Here's the code I used to define the vimeoComponent:

My alpine.js

document.addEventListener('alpine:init', () => {
  Alpine.data('vimeoComponent', (config) => {
    const conf = {
      state: null,
      id: '',
      domain: '',
      ...config
    };

    return {
      state: conf.state,
      id: conf.id,
      domain: conf.domain,
      status: 'empty',

      init() {
        console.log('Vimeo Component Initialized', {
          state: this.state,
          id: this.id,
          domain: this.domain,
          status: this.status
        });

        this.updateStatus();

        this.$watch('state', (newValue) => {
          console.log('State changed:', newValue);
          this.updateStatus();
        });
      },

      updateStatus() {
        if (!this.state) {
          this.status = 'empty';
        } else if (this.isTranscoding()) {
          this.status = 'transcoding';
        } else {
          this.status = 'available';
        }
        console.log('Updated status:', this.status);
      },

      isTranscoding() {
        return false;
      },

      getEmbedUrl() {
        if (!this.state) return null;
        return `https://player.vimeo.com/video/${this.state}?h=00000000&badge=0&autopause=0&player_id=0&app_id=58479`;
      }
    };
  });
});

My vimeo.blade.php

<x-dynamic-component :component="$getFieldWrapperView()" :id="$getId()" :label="$getLabel()" :label-sr-only="$isLabelHidden()" :helper-text="$getHelperText()"
    :hint="$getHint()" :hint-action="$getHintAction()" :hint-color="$getHintColor()" :hint-icon="$getHintIcon()" :required="$isRequired()" :state-path="$getStatePath()">
    <div x-data="vimeoComponent({
        state: $wire.entangle('{{ $getStatePath() }}').defer,
        id: '{{ $getExtraAttributes()['id'] ?? '' }}',
        domain: '{{ $getExtraAttributes()['domain'] ?? '' }}'
    })" wire:ignore>

        <!-- State is null -->
        <div x-show="state === null">
            <div x-ref="element" class="flex items-center justify-center"></div>
            <input id="{{ $getId() }}" {!! $isRequired() ? 'required' : null !!} type="hidden"
                {{ $applyStateBindingModifiers('wire:model') }}="{{ $getStatePath() }}"
                {{ $attributes->merge($getExtraAttributes())->class(['filament-forms-hidden-component']) }}
                dusk="filament.forms.{{ $getStatePath() }}">
        </div>

        <!-- Transcoding State -->
        <template x-if="status === 'transcoding'">
            <div class="uppy-Dashboard" data-uppy-drag-drop-supported="true">
                <div class="uppy-Dashboard-inner" style="width: 100%; height: 350px;">
                    <div class="uppy-Dashboard-AddFiles">
                        <div class="uppy-Dashboard-AddFiles-title">
                            Video is currently transcoding
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- Available Video -->
        <template x-if="state !== null && status !== 'transcoding'">
            <div x-ref="element" class="flex items-center justify-center">
                <iframe x-show="status === 'available' && state" :src="`https://player.vimeo.com/video/${state}`"
                    width="900" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen
                    allowfullscreen></iframe>
            </div>
        </template>
    </div>
</x-dynamic-component>

I'm expecting that the vimeoComponent would be defined and accessible in the Alpine component. However, I'm still encountering the errors about state and vimeoComponent being undefined.

Would appreciate any help in resolving these expression errors! Thanks in advance.