title: Vue: Is code in mounted() run synchronously?
body: <p>I have Vue components and one of my Vue components is a Square payment form.  In my <code>mounted()</code>, I have all the Square logic and making the form as <code>paymentForm</code>. <em>After</em> the payment is created, I need to run <code>paymentForm.build()</code>.  How can I do this without using a setTimeout?</p>
  
  <pre><code>mounted() {
  
        this.paymentForm = new SqPaymentForm({
                // Initialize the payment form elements
              autoBuild: false,
              applicationId: applicationId,
              locationId: locationId,
              inputClass: 'form-control',
  
              // Customize the CSS for SqPaymentForm iframe elements
              inputStyles: [{
                  fontSize: '14px',
              }],
  
              // Initialize the credit card placeholders
              cardNumber: {
                  elementId: 'sqCardNumber',
                  placeholder: 'Card Number'
              },
              cvv: {
                  elementId: 'sqCvCode',
                  placeholder: 'CVV'
              },
              expirationDate: {
                  elementId: 'sqExp',
                  placeholder: 'MM/YY'
              },
              postalCode: {
                  elementId: 'sqPostalCode',
                  placeholder: 'Postal Code'
              },
        // SqPaymentForm callback functions
        callbacks: {
          methodsSupported: function (methods) {},
  
          createPaymentRequest: function () {},
  
          cardNonceResponseReceived: function(errors, nonce, cardData) {
              debugger
  
              if (errors) {
                  cardNonceError(errors);
                  return;
              }
  
              cardNonceReceived(nonce);
          },
  
          unsupportedBrowserDetected: function() {
              alert('Sorry, your browser is not supported!');
          },
          inputEventReceived: function(inputEvent) {
              switch (inputEvent.eventType) {
                  case 'focusClassAdded':
                      // HANDLE AS DESIRED
                      break;
                  case 'focusClassRemoved':
                      // HANDLE AS DESIRED
                      break;
                  case 'errorClassAdded':
                      // HANDLE AS DESIRED
                      break;
                  case 'errorClassRemoved':
                      // HANDLE AS DESIRED
                      break;
                  case 'cardBrandChanged':
                      // HANDLE AS DESIRED
                      break;
                  case 'postalCodeChanged':
                      // HANDLE AS DESIRED
                      break;
              }
          },
  
         paymentFormLoaded: function() {
  
             paymentForm.setPostalCode(postalCode);
  
             formDisplayHandler();
         }
        }
      });
  
      // setTimeout(() =&gt; {
          this.paymentForm.build()
  
      // }, 500);
  }
  </code></pre>