Fixing typos and name changes after linting

src/App.vue

@@ -2,6 +2,6 @@
   <router-link to="/">Home</router-link>
   <router-link to="/about">About</router-link>
   <router-link to="/referenceId">Reference ID Tracker</router-link>
-  <router-link to="/interactionsSankey">Interaction Sankey</router-link>
+  <router-link to="/interactionsFlow">Interactions Flow</router-link>
   <router-view></router-view>
 </template>

src/router/index.js

@@ -16,7 +16,7 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AbouView.vue"),
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
   {
     path: "/referenceId",

src/views/SearchByReferenceView.vue

@@ -3,7 +3,7 @@ import { ref } from "vue";
 
 import ContactTable from "../components/ContactTable.vue";
 import ContactsSummary from "../components/ContactsSummary.vue";
-import Error from "../components/Error.vue";
+import ErrorMessage from "../components/ErrorMessage.vue";
 
 const referenceId = ref("");
 const contactData = ref(null);
@@ -63,7 +63,7 @@ function fetchData() {
       v-if="contactData"
       :table-data="contactData.data.findContactsCompletedBetween.edges"
     />
-    <Error v-if="errorMessage" :error-message="errorMessage" />
+    <ErrorMessage v-if="errorMessage" :message="errorMessage" />
   </div>
 </template>
 <style scoped></style>