How to add multiple reCaptcha in same component in vue.js?

Question

I have a component which contains 2 tabs. I need to add reCaptcha to both tabs. I did the following code, but captcha appears only in the first tab

<div class="tab-content clearfix">
 <div class="tab-pane active" id="1a">
  <form>
   <div class="g-recaptcha" id="recaptchaTab1" :data-sitekey="rcapt_sig_key"></div>
  </form>
 </div>  
</div>  
<div class="tab-content clearfix">
 <div class="tab-pane active" id="1a">
  <form>
   <div class="g-recaptcha" id="recaptchaTab2" :data-sitekey="rcapt_sig_key"></div>
  </form>
 </div>  
</div>

In javascript

data() {
 return {
  rcapt_sig_key: "site_key",
  recaptchaTab2: 0,
  recaptchaTab1: 0
  }
},
mounted() {
  if (window.grecaptcha) {
   this.rcaptIdTab2 = grecaptcha.render( 'recaptchaTab2', { sitekey : this.rcapt_sig_key });
   this.rcaptIdTab1 = grecaptcha.render( 'recaptchaTab1', { sitekey : this.rcapt_sig_key });
  }
 }

When I refresh the page,captcha is showed in the first tab.

Answer 1

This is due to the way how ReCaptcha work, you cannot render multiple ReCaptcha on one page, which you are doing in your component. ( https://groups.google.com/forum/#!topic/recaptcha/kOYcRJCSDXM ).

Either you let all forms share the same ReCaptcha on one page, or use popups to display the ReCaptcha or try to offload the rendering and parsing to the server and some AJAX.