title: Cannot get reCAPTCHA token onSubmit method
body: <p>I have the following form and try to get token for passing it to the backend (for reCAPTCHA validation).</p>
  <p>First, I add the necessary script to <code>index.html</code>:</p>
  <pre><code>&lt;script src=&quot;https://www.google.com/recaptcha/api.js?render=my_site_key&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Then in my <code>login.vue</code> form:</p>
  <pre><code>&lt;a-button @click=&quot;onSubmit&quot;&gt;Login&lt;/a-button&gt;
  
  &lt;div class=&quot;g-recaptcha&quot;
       data-sitekey=&quot;my_site_key&quot;
       data-callback=&quot;onSubmit&quot;
       data-size=&quot;invisible&quot;&gt;
  &lt;/div&gt;
  
  
  // ...
  
  onSubmit() {
    var t = null;
  
    grecaptcha.execute().then(function(token) {
      t = token
    });
  }
  </code></pre>
  <p>In <code>onSubmit</code> method, I cannot get <code>token</code> and its value is null. I tried some workarounds, but not working properly. So, is there a problem or missing part related to the implementation above? Or how can I pass the necessary parameter (I think I just need to pass token as <code>g-recaptcha-response</code>)?</p>
  <p><em><strong>Update:</strong></em></p>
  <p>Here is my <code>onSubmit</code> method. At <code>this.login()</code> line, it throws &quot;<em>Uncaught (in promise) TypeError: Cannot read property 'login' of undefined at...</em>&quot; error :(</p>
  <pre><code>onSubmit() {
    var t = null;
    grecaptcha.execute('my_site_key', {action: 'submit'}).then(function(token) {
  
      const payload = { email: 'admin@admin.com', password: '********' };
      this.login(payload).then((response) =&gt; {
        // ...
      });
  
    });
  }
  </code></pre>