Регистрация компонента Vue JS

У меня есть страница JS с экземпляром Vue Js, в которую я импортирую компонент. Однако я получаю следующую ошибку:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Атрибут имя правильный в экспортировать объект компонента, который я импортирую, поэтому мне интересно, что вызывает эту ошибку.

Компонент:

<template>
  <GoogleMapLoader :mapConfig = "mapConfig" apiKey = "YOUR_API_KEY">
    <template slot-scope = "{ google, map }">
      <GoogleMapMarker
        v-for = "marker in markers"
        :key = "marker.id"
        :marker = "marker"
        :google = "google"
        :map = "map"
      />
      <GoogleMapLine
        v-for = "line in lines"
        :key = "line.id"
        :path.sync = "line.path"
        :google = "google"
        :map = "map"
      />
    </template>
  </GoogleMapLoader>
</template>

<script>
import GoogleMapLoader from "./GoogleMapLoader";
import GoogleMapMarker from "./GoogleMapMarker";
import GoogleMapLine from "./GoogleMapLine";
import { mapSettings } from "./mapSettings";

export default {
  name: "TravelMap",
  components: {
    GoogleMapLoader,
    GoogleMapMarker,
    GoogleMapLine
  },

  data() {
    return {
      markers: [
        { id: "here", position: { lat: 32.800359, lng: -117.021605 } },
        { id: "there", position: { lat: -51.628489, lng: -72.545818 } }
      ],
      lines: [{
        id: "1",
        path: [{ lat: 32.800359, lng: -117.021605 }, { lat: -51.628489, lng: -72.545818 }]
      }]
    };
  },

  computed: {
    mapConfig() {
      return {
        ...mapSettings,
        center: this.mapCenter
      };
    },

    mapCenter() {
      return this.markers[1].position;
    }
  }
};
</script>

import Vue from "vue";

Vue.config.productionTip = false;

import TravelMap from "./TravelMap";

new Vue({
  el: "#App",
  components: { TravelMap }
});

Вот также ссылка на песочницу со всем примером кода: https://codesandbox.io/s/yqqwwz0z1x