title: Vue.js google reCaptcha callback
body: <p>I am trying to get recaptcha callback working with vue.js in a component. The captcha itself does work, but not the callback that I define in the <code>data-callback</code> attribute.</p>
  
  <p>I've tried everything I could think of, but I still get the <code>ReCAPTCHA couldn't find user-provided function: dothisthat</code> error.</p>
  
  <p>Here is the component</p>
  
  <pre><code>&lt;script&gt;
      function dothisthat (){
              alert(312);
          }
  &lt;/script&gt;
  
  &lt;template&gt;
      &lt;div class="well main-well"&gt;
          &lt;h4&gt;Captcha&lt;/h4&gt;
          &lt;p class="small"&gt;You must complete the captcha to finish your booking.&lt;/p&gt;
          &lt;div id="captcha-wrapper"&gt;
              &lt;div class="g-recaptcha" :data-sitekey="captchaKey" data-callback="dothisthat"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
       function dothisthat (){
          alert(123);
      }
      import * as filters from '../../../filters';
      import Translation from '../../../Translation';
  
      export default {
          name: 'Captcha',
          props: {
          },
          computed: {
              captchaKey: function() {
                  return this.$store.getters.captcha;
              }
          },
          methods: {
              dothisthat: function(){
                  return function() {
                      console.log("123");
                  };
              }
          },
          mounted(){
  
              function dothisthat() {
                  alert(123);
              }
              $(function() {
                  function dothisthat() {
                      alert(123);
                  }
              });
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Not one of the <code>dothisthat</code> functions are getting called. 
  What am I doing wrong?</p>