A few small fixes

Author: johnsimons

src/Frontend/src/components/TabsLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, type Component, type DefineComponent } from "vue";
+import { ref, type Component, type DefineComponent, shallowRef } from "vue";
 
 interface Tab {
   text: string;
@@ -8,7 +8,7 @@ interface Tab {
 
 const props = defineProps<{ tabs: Tab[] }>();
 const activePanel = ref(0);
-const activeComponent = ref(props.tabs[0].component);
+const activeComponent = shallowRef(props.tabs[0].component);
 
 function togglePanel(panelIndex: number) {
   activePanel.value = panelIndex;

src/Frontend/src/components/messages/MessageView2.vue

@@ -24,27 +24,9 @@ const route = useRoute();
 const id = computed(() => route.params.id as string);
 const messageId = computed(() => route.params.messageId as string);
 const isError = computed(() => messageId.value === undefined);
-
 const isMassTransitConnected = useIsMassTransitConnected();
 const store = useMessageViewStore();
 const { state } = storeToRefs(store);
-
-watch(
-  [id, messageId],
-  async ([newId, newMessageId], [oldId, oldMessageId]) => {
-    if (newId !== oldId || newMessageId !== oldMessageId) {
-      store.reset();
-    }
-
-    if (newMessageId !== undefined) {
-      await store.loadMessage(newMessageId, newId);
-    } else {
-      await store.loadFailedMessage(newId);
-    }
-  },
-  { immediate: true }
-);
-
 const tabs = computed(() => {
   const currentTabs = [
     {
@@ -73,6 +55,22 @@ const tabs = computed(() => {
 
   return currentTabs;
 });
+
+watch(
+  [id, messageId],
+  async ([newId, newMessageId], [oldId, oldMessageId]) => {
+    if (newId !== oldId || newMessageId !== oldMessageId) {
+      store.reset();
+    }
+
+    if (newMessageId !== undefined) {
+      await store.loadMessage(newMessageId, newId);
+    } else {
+      await store.loadFailedMessage(newId);
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>