Fitting GTM with Nuxt route change with <nuxt-link>

I have a problem implementing Google Tag Manager with Nuxt (SSR enabled). Where I want to trigger container loaded on every page where it hits a page change on UA or G4A and I have tried these set of implementations.

1. Implementing the library module of @nuxtjs/gtm where I have implemented pageTracking: true and tried implementing the trigger point of nuxtRoute via instructions from https://www.ericbroucek.us/blog/google-tag-manager-google-analytics-setup-with-nuxt/
2. Implementing

    __dangerouslyDisableSanitizers: ['script'],
          script: [
            {
              vmid: 'extscript',
              innerHTML: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
          })(window,document,'script','dataLayer',`${gtmID}`);`,
              type: 'text/javascript',
              charset: 'utf-8',
              defer: true } 
            },
          ], 

on every page via the vue-meta head() feature

3. Implementing an static/analytics.js file filled with gtm default script code and then reference it via nuxt.config.js's head object.

4. Implementing to manually load the script on every page

mounted() {
let gtm = document.createElement('script')
    gtm.type = 'text/javascript'
    gtm.text = this.googleDefaultFunctionScript
    document.head.appendChild(gtm)
}

When I load a page I am expecting these set sequence to load on initialization

However when I hit <nuxt-link> button to navigate the website via vue-router to preserve states within the web app and expecting

but getting

instead.

As you can see that the page name doesn't change unless I navigate via <a> tag instead of <nuxt-link> tag. I want to be able to load the script sequence with every nuxt page I load.