diff --git a/pages/http-dumps/[id].vue b/pages/http-dumps/[id].vue
index 44a5ae2c..3fdfa22c 100644
--- a/pages/http-dumps/[id].vue
+++ b/pages/http-dumps/[id].vue
@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useRoute, useRouter, useHead } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useHttpDump } from "~/src/entities/http-dump";
+import type { HttpDump } from "~/src/entities/http-dump/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { HttpDumpPage } from "~/src/screens/http-dump";
+
+const { normalizeHttpDumpEvent } = useHttpDump();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Http dumps > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeHttpDumpEvent(
+        serverEvent.value as unknown as ServerEvent<HttpDump>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="http-dumps-event">
     <PageHeader
@@ -7,10 +66,10 @@
     >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/
       <NuxtLink to="/http-dumps">Http dumps</NuxtLink>&nbsp;/
-      <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="http-dumps-event__loading">
+    <div v-if="isLoading && !event" class="http-dumps-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,71 +81,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useHttpDump } from "~/src/entities/http-dump";
-import type { HttpDump } from "~/src/entities/http-dump/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { HttpDumpPage } from "~/src/screens/http-dump";
-
-const { normalizeHttpDumpEvent } = useHttpDump();
-
-export default defineComponent({
-  components: { HttpDumpPage, PageHeader },
-
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Http dumps > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeHttpDumpEvent(
-            this.serverEvent as unknown as ServerEvent<HttpDump>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 .http-dumps-event {
diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
index 9a5106c7..ea5e5441 100644
--- a/pages/inspector/[id].vue
+++ b/pages/inspector/[id].vue
@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { onMounted, computed, ref } from "vue";
+import { useFetch, useHead, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useInspector } from "~/src/entities/inspector";
+import type { Inspector } from "~/src/entities/inspector/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { InspectorPage } from "~/src/screens/inspector";
+
+const { normalizeInspectorEvent } = useInspector();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Inspector > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeInspectorEvent(
+        serverEvent.value as unknown as ServerEvent<Inspector>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="inspector-event">
     <PageHeader
@@ -7,10 +66,10 @@
     >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
       <NuxtLink to="/inspector">Inspector</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="inspector-event__loading">
+    <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,71 +81,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useInspector } from "~/src/entities/inspector";
-import type { Inspector } from "~/src/entities/inspector/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { InspectorPage } from "~/src/screens/inspector";
-
-const { normalizeInspectorEvent } = useInspector();
-
-export default defineComponent({
-  components: { InspectorPage, PageHeader },
-
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Inspector > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeInspectorEvent(
-            this.serverEvent as unknown as ServerEvent<Inspector>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 .inspector-event {
diff --git a/pages/profiler/[id].vue b/pages/profiler/[id].vue
index 94ab4ab6..d6fb2a17 100644
--- a/pages/profiler/[id].vue
+++ b/pages/profiler/[id].vue
@@ -1,3 +1,62 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useHead, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useProfiler } from "~/src/entities/profiler";
+import type { Profiler } from "~/src/entities/profiler/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { ProfilerPage } from "~/src/screens/profiler";
+
+const { normalizeProfilerEvent } = useProfiler();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Profiler > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeProfilerEvent(
+        serverEvent.value as unknown as ServerEvent<Profiler>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="profiler-event">
     <PageHeader
@@ -10,7 +69,7 @@
       <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="profiler-event__loading">
+    <div v-if="isLoading && !event" class="profiler-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,70 +81,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useProfiler } from "~/src/entities/profiler";
-import type { Profiler } from "~/src/entities/profiler/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { ProfilerPage } from "~/src/screens/profiler";
-
-const { normalizeProfilerEvent } = useProfiler();
-
-export default defineComponent({
-  components: { ProfilerPage, PageHeader },
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Profiler > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeProfilerEvent(
-            this.serverEvent as unknown as ServerEvent<Profiler>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 
diff --git a/pages/sentry/[id].vue b/pages/sentry/[id].vue
index 80151de8..6c669c75 100644
--- a/pages/sentry/[id].vue
+++ b/pages/sentry/[id].vue
@@ -1,3 +1,60 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter, useFetch, useHead } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useSentry } from "~/src/entities/sentry";
+import type { Sentry } from "~/src/entities/sentry/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { SentryPage } from "~/src/screens/sentry";
+
+const { normalizeSentryEvent } = useSentry();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Sentry > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeSentryEvent(serverEvent.value as unknown as ServerEvent<Sentry>)
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="sentry-event">
     <PageHeader
@@ -10,7 +67,7 @@
       <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="sentry-event__loading">
+    <div v-if="isLoading && !event" class="sentry-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -20,73 +77,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useRoute, useRouter, useFetch } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useSentry } from "~/src/entities/sentry";
-import type { Sentry } from "~/src/entities/sentry/types";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { SentryPage } from "~/src/screens/sentry";
-
-const { normalizeSentryEvent } = useSentry();
-
-export default defineComponent({
-  components: {
-    SentryPage,
-    PageHeader,
-  },
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `Sentry > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeSentryEvent(
-            this.serverEvent as unknown as ServerEvent<Sentry>
-          )
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";
 
diff --git a/pages/smtp/[id].vue b/pages/smtp/[id].vue
index c7a39d79..4671cc07 100644
--- a/pages/smtp/[id].vue
+++ b/pages/smtp/[id].vue
@@ -1,3 +1,65 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter, useFetch, useHead } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useSmtp } from "~/src/entities/smtp";
+import type { SMTP } from "~/src/entities/smtp/types";
+import { REST_API_URL } from "~/src/shared/lib/io";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { SmtpPage } from "~/src/screens/smtp";
+
+const { normalizeSmtpEvent } = useSmtp();
+
+const { params } = useRoute();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `SMTP > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeSmtpEvent(serverEvent.value as unknown as ServerEvent<SMTP>)
+    : null
+);
+
+const html = computed(
+  () => `<iframe src="${REST_API_URL}/api/smtp/${eventId}/html"/>`
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
 <template>
   <main class="smtp-event">
     <PageHeader
@@ -10,7 +72,7 @@
       <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
-    <div v-if="pending && !event" class="smtp-event__loading">
+    <div v-if="isLoading && !event" class="smtp-event__loading">
       <div></div>
       <div></div>
       <div></div>
@@ -22,70 +84,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
-import { useSmtp } from "~/src/entities/smtp";
-import type { SMTP } from "~/src/entities/smtp/types";
-import { REST_API_URL } from "~/src/shared/lib/io";
-import { useEvents } from "~/src/shared/lib/use-events";
-import type { EventId, ServerEvent } from "~/src/shared/types";
-import { SmtpPage } from "~/src/screens/smtp";
-
-const { normalizeSmtpEvent } = useSmtp();
-
-export default defineComponent({
-  components: { SmtpPage, PageHeader },
-  async setup() {
-    const route = useRoute();
-    const router = useRouter();
-    const eventId = route.params.id as EventId;
-
-    const { events } = useEvents();
-
-    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
-      onResponse({ response }) {
-        return response.data;
-      },
-      onResponseError() {
-        router.push("/404");
-      },
-      onRequestError() {
-        router.push("/404");
-      },
-    });
-
-    return {
-      serverEvent: event,
-      pending,
-      eventId,
-      html: `<iframe src="${REST_API_URL}/api/smtp/${eventId}/html"/>`,
-      clearEvent: () => events.removeById(eventId),
-    };
-  },
-  head() {
-    return {
-      title: `SMTP > ${this.eventId} | Buggregator`,
-    };
-  },
-  computed: {
-    event() {
-      return this.serverEvent
-        ? normalizeSmtpEvent(this.serverEvent as unknown as ServerEvent<SMTP>)
-        : null;
-    },
-  },
-  methods: {
-    onDelete() {
-      this.clearEvent();
-
-      this.$router.push("/");
-    },
-  },
-});
-</script>
-
 <style lang="scss" scoped>
 @import "assets/mixins";