diff --git a/packages/client/src/components/Content.ts b/packages/client/src/components/Content.ts
index 41fb0fdc7b..59f7665976 100644
--- a/packages/client/src/components/Content.ts
+++ b/packages/client/src/components/Content.ts
@@ -28,9 +28,15 @@ export const Content = defineComponent({
 
     return () =>
       h(ContentComponent.value, {
-        onVnodeMounted: runCallbacks,
-        onVnodeUpdated: runCallbacks,
-        onVnodeBeforeUnmount: runCallbacks,
+        onVnodeMounted: () => {
+          runCallbacks('mounted')
+        },
+        onVnodeUpdated: () => {
+          runCallbacks('change')
+        },
+        onVnodeBeforeUnmount: () => {
+          runCallbacks('beforeUnmount')
+        },
       })
   },
 })
diff --git a/packages/client/src/composables/contentHooks.ts b/packages/client/src/composables/contentHooks.ts
new file mode 100644
index 0000000000..dbc1fb3180
--- /dev/null
+++ b/packages/client/src/composables/contentHooks.ts
@@ -0,0 +1,31 @@
+import { onUnmounted } from 'vue'
+
+type LifeCycle = 'beforeUnmount' | 'change' | 'mounted'
+
+const hooks: Record<LifeCycle, (() => unknown)[]> = {
+  mounted: [],
+  beforeUnmount: [],
+  change: [],
+}
+
+const createHook =
+  (lifeCycle: LifeCycle) =>
+  (fn: () => unknown): void => {
+    hooks[lifeCycle].push(fn)
+    onUnmounted(() => {
+      hooks[lifeCycle] = hooks[lifeCycle].filter((f) => f !== fn)
+    })
+  }
+
+export const onContentChange = createHook('change')
+
+export const onContentMounted = createHook('mounted')
+
+export const onContentBeforeUnmount = createHook('beforeUnmount')
+
+/**
+ * Call all registered callbacks
+ */
+export const runCallbacks = (lifeCycle: LifeCycle): void => {
+  hooks[lifeCycle].forEach((fn) => fn())
+}
diff --git a/packages/client/src/composables/contentUpdated.ts b/packages/client/src/composables/contentUpdated.ts
deleted file mode 100644
index 1b495719ac..0000000000
--- a/packages/client/src/composables/contentUpdated.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { onUnmounted } from 'vue'
-
-let contentUpdatedCallbacks: (() => unknown)[] = []
-
-/**
- * Register callback that is called every time the markdown content is updated
- * in the DOM.
- */
-export const onContentUpdated = (fn: () => unknown): void => {
-  contentUpdatedCallbacks.push(fn)
-  onUnmounted(() => {
-    contentUpdatedCallbacks = contentUpdatedCallbacks.filter((f) => f !== fn)
-  })
-}
-
-/**
- * Call all registered callbacks
- */
-export const runCallbacks = (): void => {
-  contentUpdatedCallbacks.forEach((fn) => fn())
-}
diff --git a/packages/client/src/composables/index.ts b/packages/client/src/composables/index.ts
index 290b3b41cf..aa34aa20bb 100644
--- a/packages/client/src/composables/index.ts
+++ b/packages/client/src/composables/index.ts
@@ -1,4 +1,4 @@
 export * from './clientData.js'
 export * from './clientDataUtils.js'
 export * from './updateHead.js'
-export * from './contentUpdated.js'
+export * from './contentHooks.js'