title: Livewire Alpinejs Emit/Dispatch variables across files
body: <p><strong>How can I emit and recognise changes from child components (in separated files) using AlpineJS?</strong></p>
  <p>I'm trying to build a form in Livewire/alpinejs that would only show the next step after selected a value in the previous step.</p>
  <p>I know I can use livewire model/emitUp to catch changes from the selectfield child component and then use x-show accordingly. However, emitting up is rather slow, waiting around 5 seconds after selecting each select field isn't a good user experience. Hence the user of AlpineJs.</p>
  <p>The issue is that x-data is scoped locally and I cannot pass down a variable and assign that as the x-model. AlpineJS has $dispatch, but it seems to only work within a file. So I can't dispatch when the x-model changed and then catch that change in Livewire Main Form.</p>
  <p>Livewire Main Form</p>
  <pre><code>&lt;div&gt;
    &lt;form&gt;
      &lt;livewire:selectfield /&gt;
  
      {{-- Only show this div when livewire:selectfield has selected a value (Incomplete code)--}}
      &lt;p&gt; 
        Should see this only when a select-field value has been selected 
      &lt;/p&gt;
    &lt;/form&gt;
  &lt;div&gt;
  </code></pre>
  <p>Livewire Select Field</p>
  <pre><code>&lt;div x-data=&quot;{ selectedField: '' }&quot;&gt;
    &lt;label&gt; Form Label &lt;/label&gt;
    &lt;select x-model=&quot;selectedField&quot;&gt;
      &lt;option value=&quot;1&quot;&gt;Opt 1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Opt 2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Opt 3&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>Is there any way of showing/hiding div elements when the child component input fields have a selected input? Preferably with AlpineJS due for user experience and less network bombardments.</p>
  <p><strong>EDIT</strong></p>
  <p>Turns out I just didn't use the functions properly! Ignore this</p>