use fancy name casting for imported component

src/App.vue

@@ -42,7 +42,7 @@
   export default {
     name: 'App',
     components: {
-      'top-nav': TopNav,
+      TopNav,
     }
   }
 </script>

src/pages/Customers.vue

@@ -5,7 +5,7 @@
 
       <div class="columns is-multiline">
         <div class="column is-one-third" v-for="customer in customers">
-          <CustomerCard :customer="customer">
+          <customer-card :customer="customer">
         </div>
       </div>
 
@@ -19,7 +19,7 @@
   export default {
     name: 'CustomerPage',
     components: {
-      CustomerCard
+      CustomerCard,
     },
     data() {
       const mockCustomer = (num) => ({

src/pages/Login.vue

@@ -28,7 +28,7 @@
   export default {
     name: 'LoginPage',
     components: {
-      'top-nav': TopNav,
+      TopNav,
     },
     data () {
       return {