diff --git a/client/package.json b/client/package.json
index 9f493a09502..a1f60a52fbb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
     "@johmun/vue-tags-input": "^2.1.0",
     "@popperjs/core": "^2.11.5",
     "@sentry/browser": "^6.17.4",
+    "@vueuse/core": "^9.6.0",
     "assert": "^2.0.0",
     "axios": "^0.25.0",
     "babel-runtime": "^6.26.0",
diff --git a/client/src/composables/sensors/animationFrameResizeObserver.js b/client/src/composables/sensors/animationFrameResizeObserver.ts
similarity index 57%
rename from client/src/composables/sensors/animationFrameResizeObserver.js
rename to client/src/composables/sensors/animationFrameResizeObserver.ts
index 281c4a8cb1b..8f3bb078831 100644
--- a/client/src/composables/sensors/animationFrameResizeObserver.js
+++ b/client/src/composables/sensors/animationFrameResizeObserver.ts
@@ -1,16 +1,28 @@
 import { useAnimationFrame } from "./animationFrame";
-import { unref } from "vue";
+import type { MaybeComputedRef } from "@vueuse/core";
+import { resolveUnref } from "@vueuse/core";
 
-export function useAnimationFrameResizeObserver(element, callback) {
+export type Size = { width: number; height: number };
+type CallbackValue = { clientSize: Size; scrollSize: Size };
+export type AnimationFrameResizeObserverCallback = (oldValue: CallbackValue, newValue: CallbackValue) => void;
+
+export function useAnimationFrameResizeObserver(
+    element: MaybeComputedRef<HTMLElement | null>,
+    callback: AnimationFrameResizeObserverCallback
+) {
     var clientSize = { width: 0, height: 0 };
     var scrollSize = { width: 0, height: 0 };
 
-    const isSameSize = (a, b) => {
+    const isSameSize = (a: Size, b: Size) => {
         return a.width === b.width && a.height === b.height;
     };
 
     const { stop } = useAnimationFrame(() => {
-        const el = unref(element);
+        const el = resolveUnref(element);
+
+        if (!el) {
+            return;
+        }
 
         const newClientSize = {
             width: el.clientWidth,
diff --git a/client/src/composables/sensors/animationFrameScroll.js b/client/src/composables/sensors/animationFrameScroll.ts
similarity index 72%
rename from client/src/composables/sensors/animationFrameScroll.js
rename to client/src/composables/sensors/animationFrameScroll.ts
index 81f1c8325b0..e79ebe752b2 100644
--- a/client/src/composables/sensors/animationFrameScroll.js
+++ b/client/src/composables/sensors/animationFrameScroll.ts
@@ -1,7 +1,9 @@
 import { useAnimationFrame } from "./animationFrame";
-import { reactive, ref, unref } from "vue";
+import { reactive, ref } from "vue";
+import type { MaybeComputedRef } from "@vueuse/core";
+import { resolveUnref } from "@vueuse/core";
 
-export function useAnimationFrameScroll(element) {
+export function useAnimationFrameScroll(element: MaybeComputedRef<HTMLElement | null>) {
     const scrollLeft = ref(0);
     const scrollTop = ref(0);
 
@@ -13,7 +15,12 @@ export function useAnimationFrameScroll(element) {
     });
 
     const { stop } = useAnimationFrame(() => {
-        const el = unref(element);
+        const el = resolveUnref(element);
+
+        if (!el) {
+            return;
+        }
+
         const left = el.scrollLeft;
 
         if (left !== scrollLeft.value) {
diff --git a/client/yarn.lock b/client/yarn.lock
index 238cb3c8dc8..4f3bcf4be66 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2062,6 +2062,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -2227,6 +2232,28 @@
     source-map "0.5.6"
     tsconfig "^7.0.0"
 
+"@vueuse/core@^9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.6.0.tgz#de1d4730849cdbe28a9ebcf6cad167a700919603"
+  integrity sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.6.0"
+    "@vueuse/shared" "9.6.0"
+    vue-demi "*"
+
+"@vueuse/metadata@9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.6.0.tgz#b0a73277538cebef5d477983f74fdd2aa21ce5f9"
+  integrity sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==
+
+"@vueuse/shared@9.6.0":
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.6.0.tgz#ce2e0e8124c6bdb1e270fc213e334ccc71dcb951"
+  integrity sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"