Force rerender when course session is switched

client/src/App.vue

@@ -3,7 +3,7 @@
     <MainNavigationBar class="flex-none" />
     <RouterView v-slot="{ Component }" class="flex-auto">
       <Transition mode="out-in" name="app">
-        <component :is="Component"></component>
+        <component :is="Component" :key="componentKey"></component>
       </Transition>
     </RouterView>
     <AppFooter class="flex-none" />
@@ -15,12 +15,19 @@ import log from "loglevel";
 
 import AppFooter from "@/components/AppFooter.vue";
 import MainNavigationBar from "@/components/header/MainNavigationBar.vue";
-import { onMounted } from "vue";
+import eventBus from "@/utils/eventBus";
+import { onMounted, ref } from "vue";
+
+const componentKey = ref(1);
 
 log.debug("App created");
 
 onMounted(() => {
   log.debug("App mounted");
+
+  eventBus.on("switchedCourseSession", () => {
+    componentKey.value++;
+  });
 });
 </script>
 

client/src/services/learningPath.ts

@@ -102,6 +102,7 @@ export class LearningPath implements WagtailLearningPath {
     }
 
     if (userId) {
+      // TODO this might become a memory leak without unbinding...
       eventBus.on("switchedCourseSession", (courseSession) => {
         log.debug("handle switchedCourseSession", courseSession);
         this.reloadCompletionData();