title: Cannot read property 'focus' of undefined in VUE When setting focus to button
body: <p>I am new to <code>vue</code> I have <code>component</code> which if the <code>endpoint</code> fails, calls my generic 'Error' modal. All this is working fine but I keep getting the following error:</p>
  <p><em>Cannot read property 'focus' of undefined</em></p>
  <p>This only happens for the <code>else</code> part of my <code>method</code> <code>function</code>.</p>
  <p>For this specific issue is I my 'failedPrcess' equals any of the following, this is when I get is, all others are fine:</p>
  <ul>
  <li>existOrderSearchProdOrders</li>
  <li>stockSearchStockLevels</li>
  <li>cartFetchCouriers</li>
  </ul>
  <p><strong>Code</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;modal fade danger-modal&quot; id=&quot;errorModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;errorModalTitle&quot; aria-hidden=&quot;true&quot;
              data-keyboard=&quot;false&quot; data-backdrop=&quot;static&quot; style=&quot;z-index: 99999&quot;&gt;
          &lt;div class=&quot;modal-dialog modal-dialog-centered&quot; role=&quot;document&quot;&gt;
              &lt;div class=&quot;modal-content danger-modal-content&quot;&gt;
                  &lt;div class=&quot;modal-header danger-modal-headerfooter&quot;&gt;An error has occurred&lt;/div&gt;
                  &lt;div class=&quot;modal-body&quot;&gt;
                      &lt;p v-if=&quot;failedProcess === 'appGetAccount' || failedProcess === 'existOrderSearchProdOrders' || failedProcess === 'stockSearchStockLevels'
                              || failedProcess === 'cartFetchCouriers'&quot;&gt;
                          {{ contactTxt | capitalize }}
                      &lt;/p&gt;
                      &lt;p v-else-if=&quot;errorCount &lt; 3&quot;&gt;If the error continues, {{ contactTxt }}&lt;/p&gt;
                      &lt;p v-else&gt;As the error has continued, {{ contactTxt }}&lt;/p&gt;
                      &lt;p&gt;
                          &lt;b&gt;
  01234 567890
                              &lt;br /&gt;
  Open from 00:00 to 07:00
                          &lt;/b&gt;
                      &lt;/p&gt;
                      &lt;p&gt;Advising of what you were doing when the error occurred.&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;modal-footer danger-modal-headerfooter&quot;&gt;
                      &lt;a v-if=&quot;failedProcess === 'appGetAccount'&quot; ref=&quot;logoutButton&quot; class=&quot;btn btn-primary&quot; :class=&quot;logoutButtClicked&quot; @click=&quot;logoutClicked = true&quot; href=&quot;/site/logout&quot;&gt;
                          &lt;span v-if=&quot;!logoutClicked&quot; id=&quot;logoutButtonLabel&quot;&gt;Logout&lt;/span&gt;
                          &lt;span v-else id=&quot;logoutSpinner&quot;&gt;
                          &lt;span class=&quot;spinner-border spinner-border-sm&quot; role=&quot;status&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                              Logging out
                          &lt;/span&gt;
                      &lt;/a&gt;
                      &lt;router-link v-else-if=&quot;failedProcess === 'fetchOrderReportDetails'&quot; to=&quot;/review&quot; tag=&quot;button&quot;
                                      ref=&quot;existOrdersButton&quot; class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-dismiss=&quot;modal&quot; @click.native=&quot;closeButton&quot;&gt;
                          Return to existing orders
                      &lt;/router-link&gt;
                      &lt;button v-else-if=&quot;errorCount &lt; 3 &amp;&amp; (failedProcess !== 'productsFetchProducts' &amp;&amp; failedProcess !== 'existOrderSearchProdOrders'
                              &amp;&amp; failedProcess !== 'stockSearchStockLevels' &amp;&amp; failedProcess !== 'cartFetchCouriers')&quot; ref=&quot;closeButton&quot; class=&quot;btn btn-primary&quot;
                              type=&quot;button&quot; data-dismiss=&quot;modal&quot; @click=&quot;closeButton&quot;&gt;
                          Close
                      &lt;/button&gt;
                      &lt;router-link v-else to=&quot;/&quot; tag=&quot;button&quot; ref=&quot;homeButton&quot; class=&quot;btn btn-primary&quot; type=&quot;button&quot; data-dismiss=&quot;modal&quot; @click=&quot;closeButton&quot;&gt;
                          Return to homepage
                      &lt;/router-link&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as params from '../params';
  
  export default {
      name: &quot;ErrorModal&quot;,
  
      data() { 
          return {
              contactTxt: 'please contact us on:',
              errorCount: 0,
              failedProcess: '',        
          }
      },
  
      mounted() {
          VueEvent.$on('show-error-modal', (failedProcess) =&gt; {
              if (this.failedProcess !== failedProcess) {
                  this.errorCount = 0;
              }
  
              this.failedProcess = failedProcess;
  
              $('#errorModal').modal('show').on('shown.bs.modal', this.focus);
          });
      },
  
      methods: {
          focus() {
              if (this.failedProcess === 'appGetAccount') {
                  this.$refs.logoutButton.focus();
              } else if (this.failedProcess === 'fetchOrderReportDetails') {
                  this.$refs.existOrdersButton.$el.focus();
              } else if (this.errorCount &lt; 3 &amp;&amp; this.failedProcess !== 'productsFetchProducts') {
                  this.$refs.closeButton.focus();
              } else {
                  this.$refs.homeButton.$el.focus();
              }
          },
      }
  }
  &lt;/script&gt;`enter code here`
  </code></pre>