title: Clean-up mounted()-attached script in destroyed() callback in Vue component
body: <p>I am programmatically adding necessary scripts into some of my Vue components, like so:</p>
  
  <pre><code>mounted() {
      const
          googleRecaptchaScript = document.createElement('script'),
          recaptchaURL = 'https://www.google.com/recaptcha/api.js';
      googleRecaptchaScript.setAttribute('src', recaptchaURL);
      googleRecaptchaScript.setAttribute('id', 'grecaptchascript');
      document.head.appendChild(googleRecaptchaScript);
  },
  </code></pre>
  
  <p>Now, I noticed that if I navigate away from the component and back into it, without refreshing the page wholesale, that Vue will start loading in duplicate copies of the things I attach in that <code>mounted()</code> call. So I wanted to clean them up as follows:</p>
  
  <pre><code>beforeDestroy() {
      const gsc = document.getElementById('grecaptchascript');
      gsc.parentElement.removeChild(gsc);
  },
  </code></pre>
  
  <p>However it seems like the <code>id</code> of that script is never even set, so the cleanup step fails silently.</p>
  
  <p>Am I doing it totally wrong? Is a better pattern for doing this? If not, why isn't my <code>&lt;script&gt;</code> getting the <code>id</code> I'm setting? </p>
  
  <p>Footnote: I am aware that using an <code>id</code> is problematic here since we're talking about duplicated elements. I'll change this later. Please consider the general case of selecting by any arbitrary attribute, if that helps. I've tried other attributes but with no success.</p>