Fix possible javascript loading order issues with trial widget dismissal

What does this MR do and why?

Fix possible javascript loading order issues with trial widget dismissal

• using data attributes and the js- classes inside vue like this could cause unpredictable loading order as likely experience in local development that could lead to dismissal not working.
• we'll convert to a pure Vue implimentation of this to address this issue

Changelog: fixed EE: true

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After
Screen_Recording_2024-10-17_at_5.02.45_PM	Screen_Recording_2024-10-17_at_4.56.21_PM

How to set up and validate locally

1. Setup gdk to simulate SaaS - https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance and restart GDK

2. Sign in. Create new group

3. In rails console create / update new GitLab subscription for your new group, make sure your user is an owner/ admin for said group

      bin/rails c
      namespace = Group.last
      gitlab_subscription = namespace.gitlab_subscription # find or create a new one if needed
      gitlab_subscription.update(hosted_plan: Plan.find_by(name: 'ultimate'))

4. To test Duo Enterprise

      bin/rails c
      add_on_purchase = GitlabSubscriptions::AddOnPurchase.create(subscription_add_on_id: GitlabSubscriptions::AddOn.find_by(name: 'duo_enterprise').id, namespace: Group.last, started_at: 65.days.ago, expires_on: 5.days.ago, trial: true, quantity: 1, purchase_xid: '1', organization_id: 1)

5. Reload group overview page and see dismissible widget.

6. Dismiss/close widget and refresh page and it should still persist.

7. in rails console run Users::GroupCallout.last.destroy to repeat test.

Related to #499616 (closed)