G-links & Locale Switcher fail when you first reach the URL. Reload & all works OK (Netlify Host)

[MoodyBones]

Describe the bug When you first reach the URL https://stiftungsfonds.netlify.app/ the Locale Switcher doesn't work and all Nav/g-links don't work. If you reload the page, everything works fine. Site is hosted by Netlify.

To Reproduce

1. Go to https://stiftungsfonds.netlify.app/
2. Click on Nav links or Hero link - Links are not working
3. Try Locale Switcher toggle - Locale switcher is not working
4. Reload page
5. Click on Nav links or Hero link - Links work
6. Try Locale Switcher - Locale switcher works

Expected behaviour G-links & Locale Switcher should function on the first load.

Screenshots Please see URL or code snippets below.

Environment (please complete the following information):

• OS: iOS
• NodeJS: v12.6.0
• Gridsome: 0.7.13
• Browser: Chrome, firefox
• Plugin: 1.6.0
• Hosting: Netlify

Plugin configuration gridsome.plugin.js

{
      use: 'gridsome-plugin-i18n',
      options: {
        locales: ['de-DE', 'en-GB'],
        pathAliases: {
          'de-DE': 'de',
          'en-GB': 'en',
        },
        fallbackLocale: 'de-DE', // fallback language
        defaultLocale: 'de-DE', // default language
        enablePathRewrite: true, // rewrite path with locale prefix, default: true
        rewriteDefaultLanguage: true, // rewrite default locale, default: true
        enablePathGeneration: true, // disable path generation
        routes: require('./routes'),
      },
    },

main.js

import DefaultLayout from '~/layouts/Main.vue'

import '~/resources/main.scss'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faGlobeEurope, faEuroSign } from '@fortawesome/free-solid-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css'

config.autoAddCss = false
library.add(faGlobeEurope, faEuroSign)

export default function(Vue, { appOptions }) {
  Vue.component('Layout', DefaultLayout) // Set default layout as a global component
  Vue.component('font-awesome', FontAwesomeIcon)

  appOptions.i18n.setLocaleMessage('de-DE', require('./locales/de-DE.json'))
  appOptions.i18n.setLocaleMessage('en-GB', require('./locales/en-GB.json'))
}

Header.vue

<template>
  <header
    id="header"
    class="px-3 bg-gray-100 flex flex-wrap justify-between items-end py-1 lg:pb-0 border-b border-gray-300"
    role="banner"
  >
    <g-link class="self-start py-6" to="/" aria-label="Back to home">
      <g-image
        class="max-w-xl w-56"
        alt="Stiftungsfonds Zivile Seenotrettung"
        src="~/resources/svg/stiftung_seenotrettung-logo.svg"
        immediate
      />
    </g-link>
    <label for="menu-toggle" class="self-center cursor-pointer lg:hidden block">
      <g-image
        alt="Menu toggle button"
        src="~/resources/svg/menu-outline.svg"
        width="40"
        height="40"
        immediate
      />
    </label>
    <input type="checkbox" class="hidden" id="menu-toggle" />
    <nav
      id="menu"
      class="hidden flex-grow lg:flex lg:justify-end lg:items-center lg:w-auto w-full"
    >
      <ul class="lg:flex items-center justify-between pt-4 lg:pt-0">
        <li>
          <g-link
            :to="$tp('/about/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[0].name') }}</span></g-link
          >
        </li>
        <li>
          <g-link
            :to="$tp('/project/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[1].name') }}</span></g-link
          >
        </li>
        <li>
          <g-link
            :to="$tp('/apply/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[2].name') }}</span></g-link
          >
        </li>
        <li>
          <g-link
            :to="$tp('/press/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[3].name') }}</span></g-link
          >
        </li>
        <li>
          <g-link
            :to="$tp('/donate/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[4].name') }}</span></g-link
          >
        </li>
        <li>
          <g-link
            :to="$tp('/imprint/')"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-base border-b-2 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="border-b-2 border-indigo-500"
            ><span>{{ $t('nav[5].name') }}</span></g-link
          >
        </li>
        <!-- <li v-for="item in $t('nav')" :key="item.name"> // BUG: this breaks active classes
          <g-link
            :to="$tp(item.link)"
            class="transition-colors ease-in duration-200 my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-700 text-lg border-b-1 border-transparent hover:border-indigo-500"
            active-class="is-active-link"
            exact-active-class="text-gray-700 border-b-1 border-indigo-500"
            >{{ item.name }}</g-link
          >
        </li> -->
        <li>
          <LocaleSwitcher
            class="my-1 lg:mb-4 mx-2 tracking-loose inline-block text-gray-900 text-lg border rounded"
          />
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
import LocaleSwitcher from '~/components/LocaleSwitcher.vue'
export default {
  components: {
    LocaleSwitcher,
  },
}
</script>

<static-query>
query {
  metadata {
    siteName
    menu {
      name
      link
    }
  }
}
</static-query>

About Me & the Project Hi, I'm Mel Jones, I'm a self-taught dev and new to Gridsome & Vue. I'm building this site for an NGO called SeaWatch any help you can give, would be very much appreciated!

Cheers, Mel