this.$recaptcha.destroy() is not removing the recaptcha scripts or badge

[kangelopoulos]

I'm encountering a problem in Nuxt 2 where the this.$recaptcha.destroy() function is not destroying the scripts.

I've called this function according to the documentation:

beforeDestroy() {
console.log('destroy me')
this.$recaptcha.destroy()
},

The console log executes, so I know the beforeDestroy hook is being called. But the badge doesn't disappear. No errors fire in the console.

These are my options in my nuxt config file:

recaptcha: {
hideBadge: false, // tried to change this to true just to see if it would work, still didn't work
language: 'en' // added this after I noticed this issues just in case, still didn't work
mode: 'enterprise',
siteKey: env-key,
version: 3,
size: 'invisible'
},

Here's the badge still in the HTML after calling the destroy function:

Here you can see it's still present in memory. One web worker that is connected to the recaptcha does disappear here when calling the destroy function.

I am calling the reset function prior to calling the destroy function as the documentation states. Everything works perfectly except for the destroy function.

I'm using nuxt version 2.15.8 and the latest recaptcha version.

We don't want the recaptcha running on any page except for the registration page.

Any chance anyone knows what might be going wrong? I can just use DOM manipulation to get rid of it but I'd rather figure out the root cause of this issue.