Two recaptcha v2 componet same page

[prabodhana]

My web application login and signup forms are in same page I need to add two recaptcha component for this two forms. It showing but reset only work with first component other component not responding for reset. I.m also try the render method but its say "reCAPTCHA has already been rendered in this element".

[SuddenDev]

I used v-if as described here: https://github.com/nuxt-community/recaptcha-module/issues/100#issuecomment-1075642195

[zoxon]

This example does't work for me because I get error reCAPTCHA has already been rendered in this element

My workaround

export default {
  data() {
    return {
      widgetId: 0,
    };
  },

  mounted() {
    if (window.__vueWidgetId === undefined) {
      window.__vueWidgetId = 0;
    } else {
      window.__vueWidgetId += 1;
    }
    
    // Get correct recaptcha widget id
    this.widgetId = window.__vueWidgetId;
  },

  methods: {
    async onSubmit() {
      if (!this.isValid) {
        retrun;
      }

      const captchaResponse = await this.$recaptcha.getResponse(this.widgetId)
      api.submitForm({...model, captchaResponse})
    }
  }
};