fix(GlSafeLinkDirective): Make update transformation reactive

Problem Statement

Context: GlLink Component uses GlSafeLink Directive to prevent any url injection causing XSS attack.

Problem: The GlSafeLink Directive doesn't sanitize the unsafe urls when:

1. Used within another component
2. and href value gets updated

This is demonstrated in video below gllink3

Solution

This MR

• adds Vue.nextTick() to perform the DOM operation after the next DOM update cycle.
• adds specs asserting the related scenario

Conformity

• Code review guidelines.
• GitLab UI's contributing guidlines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • GitLab: mr_url
  • Customers Portal: mr_url
  • Status Page: mr_url
• Added the ~"component:*" label(s) if applicable.