Nuxt: неожиданный токен <

Я работаю над пустым проектом и пытаюсь создать компонент карты, используя карты Google и плагин https://www.npmjs.com/package/vue2-google-maps. Я установил плагин с помощью npm

На моей странице index.html у меня есть нормально работающая страница, которая выглядит следующим образом:

<template>
   <div>

<br>
<br>
       <Card/>
<br>
<br>
<br>
<br>
       <!-- <Googlemap/> -->
       <Panel/>
       <Four/>
       </div> 
</template>

<script>

import Panel from '~/components/panel.vue'
import Card from '~/components/detailCard.vue'
// import GoogleMap from '~/components/googleMap.vue'


export default {

  components: {

    Panel,
    Card,
//     GoogleMap
  }

}
</script>

Когда я раскомментирую 3 строки с Google Map в них, я получаю ошибку на скриншоте.

Компонент Googlemap:

<template>
  <GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>

</template>


<script>
import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "MYTOKEN",
    libraries: "places"
  }
});

export default {

}

</script>


<style>

</style>

Что я делаю не так?

Редактировать: