title: How to pass an object from axios catch block to parent component with Vue.js
body: <p>I am using Laravel 7 and Vue.js 2.</p>
  <p>I want to pass an object of validation errors from the catch block of an axios call to a parent component but for some reasons it doesn't work.</p>
  <p>This is the code of the axios call:</p>
  <pre><code>        runReport: function() {
              let self = this;
              const url = &quot;api/get_report?room=&quot;+this.formReport['room']+&quot;&amp;participant=&quot;+this.formReport['participant']+&quot;&amp;start=&quot;+this.formReport['start']+&quot;&amp;end=&quot;+this.formReport['end'];
              axios.get(url)
              .then((response) =&gt; {
                  console.log(response.data.data);
                  this.meetingsReport = response.data.data;
                  this.$emit('passMeetings', this.meetingsReport);
                  this.$emit('success');
                  this.errors = {};
              })
              .catch(function(error) {
                  console.log(error.response.data);
                  self.errors = error.response.data;
                  alert(self.errors);
                  self.$emit('failure');
                  self.$emit('passErrors', self.errors); //problem
                  console.log('call ended');
              });
          }
  </code></pre>
  <p>This is the code in the parent component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;report-meeting @passMeetings=&quot;onPassMeetings&quot; @failure=&quot;displayTable=false&quot; @success=&quot;displayTable=true&quot;&gt;&lt;/report-meeting&gt;
          &lt;hr&gt;
          &lt;validated-errors :errorsMeeting=&quot;errorsMeeting&quot; @passErrors=&quot;onPassErrors&quot; v-if=&quot;displayTable===false&quot;&gt;&lt;/validated-errors&gt;
          &lt;table-report :meetingsSelected=&quot;meetingsSelected&quot; v-if=&quot;displayTable===true&quot;&gt;&lt;/table-report&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import TableReport from &quot;./TableReport.vue&quot;
      import ReportMeeting from &quot;./ReportMeeting.vue&quot;
      import ValidatedErrors from &quot;./ValidatedErrors.vue&quot;
  
      export default {
          components: {
              'table-report': TableReport,
              'report-meeting': ReportMeeting,
              'validated-errors': ValidatedErrors
          },
          mounted() {
              console.log('Component mounted.');
          },
          data: function() {
              return {
                  displayTable: false,
                  meetingsSelected: {},
                  errorsMeeting: {}
              }
          },
          methods: {
              onPassMeetings(value) {
                  console.log(value);
                  this.meetingsSelected = value;
              },
              onPassErrors(value) {
                  console.log('errors passed'); //never used
                  this.errorsMeeting = value;
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>In the console I visualize no errors (except an <code>422 Unprocessable Entity</code>). The strange thing is that the first emit works (<code>failure</code>), but the second one doesn't work (<code>passErrors</code>).
  In the parent function <code>onPassErrors</code> I put a <code>console.log</code> that is never used so I suppose that the function is never called.
  Can help?</p>