Type error in App.vue

App.vue

<template>
  <div id="app">
    <Navigation v-if="useLayout" v-bind:userAuthenticated="userAuthenticated" />
    <div id="root">
        <div style="display: flex; flex-direction: column">
            <router-view></router-view>
        </div>
        <Footer v-if="useLayout" />
    </div>
    <div id="alert-container" class="fixed-top w-100"></div>
  </div>
</template>
<script>

import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import mapGetters from 'vuex';

export default {
  components: { Navigation, Footer },
  computed: {
    ...mapGetters(['isAuthenticated', 'useLayout'])
  }
}
</script>

browser console error

Uncaught TypeError: Object(...) is not a function
    at eval (App.vue?234e:21)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:1289)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (App.vue?c53a:1)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:3631)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (App.vue?bff9:1)
    at Module../src/App.vue (app.js:3619)