diff --git a/webui/package-lock.json b/webui/package-lock.json
index 0fe01c787..c49e2fa48 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -21,7 +21,7 @@
         "http-status-codes": "^2.3.0",
         "js-yaml": "^4.1.0",
         "ncp": "^2.0.0",
-        "vue": "^3.5.22",
+        "vue": "^3.5.23",
         "vue-router": "^4.6.3",
         "vue3-ace-editor": "^2.2.4",
         "vue3-highlightjs": "^1.0.5",
@@ -67,21 +67,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
-      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.4"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -91,13 +91,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
-      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1298,13 +1298,13 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
-      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.23.tgz",
+      "integrity": "sha512-nW7THWj5HOp085ROk65LwaoxuzDsjIxr485F4iu63BoxsXoSqKqmsUUoP4A7Gl67DgIgi0zJ8JFgHfvny/74MA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.4",
-        "@vue/shared": "3.5.22",
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.23",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
@@ -1323,40 +1323,40 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
-      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.23.tgz",
+      "integrity": "sha512-AT8RMw0vEzzzO0JU5gY0F6iCzaWUIh/aaRVordzMBKXRpoTllTT4kocHDssByPsvodNCfump/Lkdow2mT/O5KQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-core": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
-      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.23.tgz",
+      "integrity": "sha512-3QTEUo4qg7FtQwaDJa8ou1CUikx5WTtZlY61rRRDu3lK2ZKrGoAGG8mvDgOpDsQ4A1bez9s+WtBB6DS2KuFCPw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.4",
-        "@vue/compiler-core": "3.5.22",
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/compiler-ssr": "3.5.22",
-        "@vue/shared": "3.5.22",
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.23",
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/compiler-ssr": "3.5.23",
+        "@vue/shared": "3.5.23",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.19",
+        "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
-      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.23.tgz",
+      "integrity": "sha512-Hld2xphbMjXs9Q9WKxPf2EqmE+Rq/FEDnK/wUBtmYq74HCV4XDdSCheAaB823OQXIIFGq9ig/RbAZkF9s4U0Ow==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -1742,53 +1742,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
-      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.23.tgz",
+      "integrity": "sha512-ji5w0qvrPyBmBx5Ldv4QGNsw0phgRreEvjt0iUf1lei2Sm8//9ZAi78uM2ZjsT5gk0YZilLuoRCIMvtuZlHMJw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.22"
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
-      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.23.tgz",
+      "integrity": "sha512-LMB0S6/G7mFJcpQeQaZrbsthFbWrIX8FVTzu5x9U3Ec8YW5MY1CGAnBBHNj+TPOBu3pIbtPpjrXtcaN04X+aBw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/reactivity": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
-      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.23.tgz",
+      "integrity": "sha512-r/PYc8W9THzEL0UExpTkV+d31zO+Jid/RMZIDG6aS/NekOEUHuCJkJgftySWZw7JTJO/+q9Kxkg8p+i7Q7Q+ew==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.22",
-        "@vue/runtime-core": "3.5.22",
-        "@vue/shared": "3.5.22",
+        "@vue/reactivity": "3.5.23",
+        "@vue/runtime-core": "3.5.23",
+        "@vue/shared": "3.5.23",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
-      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.23.tgz",
+      "integrity": "sha512-NiWZsNCsXA20/VufcrW5u+Trt/PyFlpMmxaB2KERYM8eZgUoKUjXxJQb9ypq+LZ0Sp3XHJGNBR8DkhRnkKAMUw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-ssr": "3.5.23",
+        "@vue/shared": "3.5.23"
       },
       "peerDependencies": {
-        "vue": "3.5.22"
+        "vue": "3.5.23"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
-      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.23.tgz",
+      "integrity": "sha512-0YZ1DYuC5o/YJPf6pFdt2KYxVGDxkDbH/1NYJnVJWUkzr8ituBEmFVQRNX2gCaAsFEjEDnLkWpgqlZA7htgS/g==",
       "license": "MIT"
     },
     "node_modules/@vue/tsconfig": {
@@ -3903,9 +3903,9 @@
       "dev": true
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -5456,16 +5456,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.22",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
-      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.23.tgz",
+      "integrity": "sha512-CfvZv/vI52xUhumUvHtD6iFIS78nGWfX4IJnHfBGhpqMI0CwDq2YEngXOeaBFMRmiArcqczuVrLxurvesTYT9w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.22",
-        "@vue/compiler-sfc": "3.5.22",
-        "@vue/runtime-dom": "3.5.22",
-        "@vue/server-renderer": "3.5.22",
-        "@vue/shared": "3.5.22"
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/compiler-sfc": "3.5.23",
+        "@vue/runtime-dom": "3.5.23",
+        "@vue/server-renderer": "3.5.23",
+        "@vue/shared": "3.5.23"
       },
       "peerDependencies": {
         "typescript": "*"
diff --git a/webui/package.json b/webui/package.json
index e5a57ed70..e1cb35963 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -29,7 +29,7 @@
     "http-status-codes": "^2.3.0",
     "js-yaml": "^4.1.0",
     "ncp": "^2.0.0",
-    "vue": "^3.5.22",
+    "vue": "^3.5.23",
     "vue-router": "^4.6.3",
     "vue3-ace-editor": "^2.2.4",
     "vue3-highlightjs": "^1.0.5",
diff --git a/webui/src/components/dashboard/kafka/KafkaTopic.vue b/webui/src/components/dashboard/kafka/KafkaTopic.vue
index 3d3d1a733..70f3aa7f6 100644
--- a/webui/src/components/dashboard/kafka/KafkaTopic.vue
+++ b/webui/src/components/dashboard/kafka/KafkaTopic.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Ref, onUnmounted } from 'vue'
+import { type Ref, computed, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useService } from '@/composables/services'
 import KafkaGroups from './KafkaGroups.vue'
@@ -13,7 +13,7 @@ const route = useRoute()
 const serviceName = route.params.service!.toString()
 const topicName = route.params.topic?.toString()
 const { service, close } = <{service: Ref<KafkaService | null>, close: () => void}>fetchService(serviceName, 'kafka')
-function topic() {
+const topic = computed(() => {
   if (!service.value) {return null}
   for (let topic of service.value?.topics){
     if (topic.name == topicName) {
@@ -21,21 +21,21 @@ function topic() {
     }
   }
   return null
-}
+})
 onUnmounted(() => {
     close()
 })
 </script>
 
 <template>
-  <div v-if="$route.name == 'kafkaTopic' && service != null">
+  <div v-if="$route.name == 'kafkaTopic' && service != null && topic">
       <div class="card-group">
         <section class="card" aria-label="Info">
             <div class="card-body">
                 <div class="row">
                     <div class="col header mb-3">
                         <p id="topic" class="label">Topic</p>
-                        <p aria-labelledby="topic">{{ topic()?.name }}</p>
+                        <p aria-labelledby="topic">{{ topic.name }}</p>
                     </div>
                     <div class="col header">
                         <p id="cluster" class="label">Cluster</p>
@@ -56,7 +56,7 @@ onUnmounted(() => {
                 <div class="row">
                     <div class="col">
                         <p id="description" class="label">Description</p>
-                        <markdown :source="topic()?.description" aria-labelledby="description" :html="true" />
+                        <markdown :source="topic.description" aria-labelledby="description" :html="true" />
                     </div>
                     
                 </div>
@@ -77,13 +77,13 @@ onUnmounted(() => {
                 <kafka-messages :service="service" :topicName="topicName" />
               </div>
               <div class="tab-pane fade" id="partitions" role="tabpanel" aria-labelledby="partitions-tab">
-                <kafka-partition :topic="topic()!" />
+                <kafka-partition :topic="topic" />
               </div>
               <div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
                 <kafka-groups :service="service" :topicName="topicName"/>
               </div>
               <div class="tab-pane fade" id="configs" role="tabpanel" aria-labelledby="configs-tab">
-                <topic-config v-if="topic()" :topic="topic()!" />
+                <topic-config :topic="topic" />
               </div>
             </div>
           </div>
diff --git a/webui/src/components/dashboard/kafka/TopicConfig.vue b/webui/src/components/dashboard/kafka/TopicConfig.vue
index 1a5c54b4a..35077ba78 100644
--- a/webui/src/components/dashboard/kafka/TopicConfig.vue
+++ b/webui/src/components/dashboard/kafka/TopicConfig.vue
@@ -4,7 +4,7 @@ import SourceView from '../SourceView.vue'
 import SchemaExpand from '../SchemaExpand.vue'
 import SchemaValidate from '../SchemaValidate.vue'
 import { usePrettyLanguage } from '@/composables/usePrettyLanguage'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
     topic: KafkaTopic,
@@ -30,9 +30,19 @@ function filename() {
     return `${props.topic.name}-example${ext}`
 }
 
-// select first message
-const first = messages(props.topic)[0]!
-selected.value = props.topic.messages[first]!
+onMounted(() => {
+    if (!props.topic) {
+        return
+    }
+    const first = messages(props.topic)[0]
+    if (first) {
+        const msg = props.topic.messages[first]
+        if (msg) {
+            selected.value = msg
+        }
+    }
+
+})
 
 function selectedMessageChange(event: any){
     for (const messageId in props.topic.messages){