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

Я работаю над проектом nuxt и пытаюсь создать компонент карты, используя карты Google и плагин https://www.npmjs.com/package/vue2-google-карты. Я установил плагин, используя 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 строки с Googlemap, я получаю сообщение об ошибке на скриншоте.

Компонент 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>

Что я делаю неправильно?

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