diff --git a/client/src/components/JobInformation/JobDetails.vue b/client/src/components/JobInformation/JobDetails.vue
index 02ce54ef750..42e32bd2060 100644
--- a/client/src/components/JobInformation/JobDetails.vue
+++ b/client/src/components/JobInformation/JobDetails.vue
@@ -1,23 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import type { JobBaseModel } from "@/api/jobs";
+
+import Heading from "../Common/Heading.vue";
+import CodeRow from "./CodeRow.vue";
+import JobInformation from "./JobInformation.vue";
+import JobMetrics from "@/components/JobMetrics/JobMetrics.vue";
+import JobParameters from "components/JobParameters/JobParameters.vue";
+
+const props = defineProps<{
+    job?: JobBaseModel;
+    jobId?: string;
+}>();
+
+const id = computed(() => props.job?.id || props.jobId);
+
+// Curious as to why we're trying to access traceback, info and remote_host like this, when they don't exist on
+// `JobBaseModel`? Possibly historical reasons? (leaving as is for now)
+const traceback = computed(() => (props.job && "traceback" in props.job ? (props.job?.traceback as string) : null));
+const info = computed(() => (props.job && "info" in props.job ? (props.job?.info as string) : null));
+const remoteHost = computed(() => (props.job && "remote_host" in props.job ? (props.job.remote_host as string) : null));
+</script>
+
 <template>
-    <div>
+    <div v-if="id">
         <JobInformation :job-id="id" :include-times="true">
             <!-- only needed for admin job component -->
-            <tr v-if="hasTraceback">
+            <tr v-if="traceback">
                 <td>Traceback</td>
                 <td>
-                    <CodeRow :code-label="'Traceback'" :code-item="job.traceback" />
+                    <CodeRow :code-label="'Traceback'" :code-item="traceback" />
                 </td>
             </tr>
-            <tr v-if="hasInfo">
+            <tr v-if="info">
                 <td>Info</td>
                 <td>
-                    <CodeRow :code-label="'Info'" :code-item="job.info" />
+                    <CodeRow :code-label="'Info'" :code-item="info" />
                 </td>
             </tr>
-            <tr v-if="hasRemoteHost">
+            <tr v-if="remoteHost">
                 <td>Remote Host</td>
                 <td>
-                    {{ job.remote_host }}
+                    {{ remoteHost }}
                 </td>
             </tr>
         </JobInformation>
@@ -30,50 +55,6 @@
     </div>
 </template>
 
-<script>
-import JobMetrics from "components/JobMetrics/JobMetrics";
-
-import JobInformation from "./JobInformation";
-
-import Heading from "../Common/Heading.vue";
-import CodeRow from "./CodeRow.vue";
-import JobParameters from "components/JobParameters/JobParameters.vue";
-
-export default {
-    components: {
-        CodeRow,
-        Heading,
-        JobInformation,
-        JobMetrics,
-        JobParameters,
-    },
-    props: {
-        job: {
-            type: Object,
-            required: false,
-        },
-        jobId: {
-            type: String,
-            required: false,
-        },
-    },
-    computed: {
-        id() {
-            return this.job?.id || this.jobId;
-        },
-        hasTraceback() {
-            return this.job?.traceback;
-        },
-        hasInfo() {
-            return this.job?.info;
-        },
-        hasRemoteHost() {
-            return this.job?.remote_host;
-        },
-    },
-};
-</script>
-
 <style scoped>
 .break-word {
     white-space: pre-wrap;