only display the list when there are coaches found

src/pages/coaches/CoachesList.vue

@@ -7,11 +7,12 @@
       <button>Refresh</button>
       <router-link to="/register">Register as Coach</router-link>
     </div>
-    <ul>
+    <ul v-if="hasCoaches">
       <li v-for="coach in filteredCoaches" :key="coach.id">
         {{ coach.firstName }}
       </li>
     </ul>
+    <h3 v-else>No coaches found.</h3>
   </section>
 </template>
 
@@ -20,6 +21,9 @@ export default {
   computed: {
     filteredCoaches() {
       return this.$store.getters['coaches/coaches'];
+    },
+    hasCoaches() {
+      return this.$store.getters['coaches/hasCoaches'];
     }
   }
 };