title: How does Laravel-Livewire fires events and listens to them?
body: <p>I have two a view that loads a livewire component</p>
  <pre><code>&lt;x-layouts.formularies&gt;
      &lt;livewire:formularies.edit.display-section :section=&quot;$section-&gt;id&quot; :formulary=&quot;$formulary-&gt;id&quot; /&gt;
  &lt;/x-layouts.formularies&gt;
  </code></pre>
  <p>This component (<strong><code>display-section</code></strong>) calls a child component in a loop...</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;letter mx-auto&quot; id=&quot;section-holder&quot;&gt;
      &lt;div class=&quot;paper-title d-flex justify-content-between&quot;&gt;
          @foreach($questionnaire-&gt;getData( 'logos', [] ) as $logo)
              &lt;img src=&quot;{{ asset($logo[ 'path' ]) }}&quot; class=&quot;img-fluid h-100&quot; /&gt;
          @endforeach
      &lt;/div&gt;
  
      &lt;div class=&quot;section-questions&quot;&gt;
          @foreach($section-&gt;questions as $question)
              &lt;livewire:formularies.edit.display-row :question=&quot;$question-&gt;id&quot;
                                                      :formulary=&quot;$formulary-&gt;id&quot; :wire:key=&quot;$question-&gt;id&quot; /&gt;
              &lt;hr /&gt;
          @endforeach
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Now, this is the <strong><code>display-row</code></strong> component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;card-body text-center p-1&quot;&gt;
      &lt;div class=&quot;btn-group m-1&quot; role=&quot;group&quot; aria-label=&quot;question-{{ $question-&gt;id }}&quot;&gt;
          @foreach($question-&gt;answers as $answer)
              &lt;input type=&quot;radio&quot;
                      wire:model=&quot;answer&quot;
                      :wire:key=&quot;$question-&gt;id . '-' . $answer-&gt;id&quot;
                      wire:click=&quot;setAnswer&quot;
                      class=&quot;btn-check&quot;
                      value=&quot;{{ $answer-&gt;id }}&quot;
                      name=&quot;question-{{ $question-&gt;id }}&quot;
                      id=&quot;question-{{ $question-&gt;id }}-{{ $answer-&gt;id }}&quot;
                      autocomplete=&quot;off&quot; /&gt;
              &lt;label class=&quot;btn btn-outline-teal text-dark mb-0&quot;
                      for=&quot;question-{{ $question-&gt;id }}-{{ $answer-&gt;id }}&quot;&gt;{{ $answer-&gt;statement }}&lt;/label&gt;
          @endforeach
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When the user picks an option from the radio button, it does some database stuff and fires an event that should be listened by the parent component (<strong><code>display-section</code></strong>):</p>
  <pre class="lang-php prettyprint-override"><code>public function setAnswer()
  {
      $this-&gt;emit( 'formularyUpdated', $this-&gt;formulary-&gt;id );
      FormularyUpdated::dispatch( $this-&gt;formulary, $this-&gt;question, $this-&gt;answer );
      dd( 'I should not get here if there is a dd before' );
  }
  </code></pre>
  <p>As you can see, this function emits a <code>formularyUpdated</code> event with the id of the formulary. And in the DisplaySection I have this:</p>
  <pre class="lang-php prettyprint-override"><code>protected $listeners = [
      'sectionAdvanced',
      'formularyUpdated',
  ];
  
  /**
      *
      */
  public function formularyUpdated( Formulary $formulary )
  {
      dd( 'This dd should stop the execution' );
  }
  </code></pre>
  <p>For some reason, this always ends with <strong><code>&quot;I should not get here if there is a dd before&quot;</code></strong> so, what should I change? why is my listener not listening or not being fired? I have tried different approaches without luck.</p>