Property or method "navigationLinks" is not defined on the instance but referenced during render. Make sure that this property is reactive

Question

Am stack in calling data from vuex module to component.

Am calling Navigation links where I have created a module navigation.js. I have imported the module in the main store.

Am using the getters to call the data in the component.

My navigation component looks like this

<template>
  <nav>
    <ul>
      <li v-for="link in navigationLinks" :key="link.label">
        <router-link :to="link.route">{{ link.label }}</router-link>
      </li>
    </ul>
  </nav>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import store from '@/store';
import navigation from '@/store/navigation';

  export default {
  name: 'Navbar',
  data: {
    
  },
  computed: {
    ...mapGetters(['navigationLinks'])
  }
}

In my main store.js

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'
import navigation from './navigation'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    auth,
    navigation
  }
})

In my navigation.js I have

const state = {
  links: [
    { label: 'Home', route: '/', icon: 'home' },
    { label: 'About', route: '/about', icon: 'info' },
    { label: 'Contact', route: '/contact', icon: 'envelope' },
  ]
}

const getters = {
  navigationLinks: state => state.links
}

export default {
  state,
  getters
}