[Vue警告]：未知的自定义元素：<Googlemap>

Question

我正在开发一个nuxt项目，并且我正在尝试使用Google地图和插件https://www.npmjs.com/package/vue2-google-maps构建地图组件。我已经使用npm安装了插件，并且当我的index.vue页面看起来像这样时，我就可以开始工作了：

<template>
   <div>


<br>
       <VideoCarousel/>
       <!-- <Googlemap/> -->
           <GmapMap :center="{lat:10, lng:10}" :zoom="7" map-type-id="terrain" style="width: 500px; height: 300px"/>
       <Panel/>
       <Four/>
       </div> 
</template>

<script>
import Three from '~/components/section3.vue'
import Four from '~/components/section4.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'
import Menu from '~/components/menu.vue'
import VideoCarousel from '~/components/video-carousel.vue'
import Panel from '~/components/panel.vue'
import GoogleMap from '~/components/googleMap.vue'


export default {

  components: {
    Three,
    Four,
    Panel,
    VideoCarousel,
    GoogleMap
  }

}
</script>

<style>

</style>

但是当我取消注释组件时，不会生成任何映射。在devtools中，我看到了：

[Vue warn]: Unknown custom element: <Googlemap> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我在做什么错了？

googleMap.vue

<template>
  <GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>

</GmapMap>

</template>


<script>


export default {
     name:'GoogleMap'

}

</script>


<style>

</style>

nuxt插件文件夹中的插件为：

/plugins/google-maps.js：

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

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