title: Livewire Alpine x-data function is not defined
body: <p>I'm using Alpine JS to mount the WYSIWYG editor(Quill JS). I declared quillComponent  function using inline script and use it inside x-data. The problem is I received quillComponent not defined error in the console. Here's my livewire component blade code:</p>
  <pre><code>@push('styles')
    &lt;link href=&quot;https://cdn.quilljs.com/1.3.6/quill.snow.css&quot; rel=&quot;stylesheet&quot;&gt;
  @endpush
  &lt;div x-data=&quot;quillComponent()&quot;&gt;
    &lt;x-ui.header class=&quot;pb-2 mb-4 border-b border-gray-300 dark:border-gray-600&quot;&gt;Terms of Service&lt;/x-ui.header&gt;
    &lt;x-ui.alt-form&gt;
      &lt;div wire:ignore&gt;
        &lt;div class=&quot;mb-2&quot;&gt;
          &lt;div class=&quot;h-64&quot; id=&quot;quillEditor&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      @error('termsData')
        &lt;x-message.validation type=&quot;error&quot;&gt;{{ $message }}&lt;/x-message.validation&gt;
      @enderror
      &lt;div class=&quot;&quot;&gt;
        &lt;x-jet-button x-on:click.prevent=&quot;onButtonClick()&quot; wire:loading.attr=&quot;disabled&quot;&gt;
          Update
        &lt;/x-jet-button&gt;
      &lt;/div&gt;
    &lt;/x-ui.alt-form&gt;
    &lt;script&gt;
      function quillComponent() {
        return {
          //Data
          data: null,
          //Function
          setDefaults(data) {
            let container = document.getElementById('quillEditor');
            quill = new Quill(container, {
              theme: 'snow'
            });
            quill.root.innerHTML = data;
            let _this = this;
            quill.on('text-change', function() {
              _this.data = quill.root.innerHTML;
            });
          },
          onButtonClick() {
            window.livewire.emit('updateData', this.data);
          }
        }
      }
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Does anyone know why?</p>