diff --git a/package.json b/package.json
index 0a864c8de..998c160eb 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"@fortawesome/free-regular-svg-icons": "5.12.0",
 		"@fortawesome/free-solid-svg-icons": "5.12.0",
 		"@fortawesome/vue-fontawesome": "0.1.9",
+		"@juggle/resize-observer": "3.0.2",
 		"@koa/cors": "3.0.0",
 		"@koa/multer": "2.0.2",
 		"@koa/router": "8.0.6",
diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts
index 7c4254566..140cb0bd7 100644
--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -1,3 +1,5 @@
+import { ResizeObserver } from '@juggle/resize-observer';
+
 export default {
 	inserted(el, binding, vn) {
 		const query = binding.value;
@@ -52,13 +54,16 @@ export default {
 
 		calc();
 
-		el._sizeResizeCb_ = calc;
+		const ro = new ResizeObserver((entries, observer) => {
+			calc();
+		});
+		
+		ro.observe(el);
 
-		window.addEventListener('resize', calc);
-		vn.context.$on('hook:activated', calc);
+		el._ro_ = ro;
 	},
 
 	unbind(el, binding, vn) {
-		window.removeEventListener('resize', el._sizeResizeCb_);
+		el._ro_.unobserve(el);
 	}
 };
diff --git a/yarn.lock b/yarn.lock
index de870e0f6..232e092cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -102,6 +102,11 @@
     normalize-path "^2.0.1"
     through2 "^2.0.3"
 
+"@juggle/resize-observer@3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.0.2.tgz#f4f326806826c0da5221411374e4c54902c327bb"
+  integrity sha512-9fEfZIxZ1qTahMSX50pigfSJ/1N6X2oABhmgd4Dt2SsPkZi0lTlvoHu5V2yrGZ6m+oALfS4tJrpx9nbVIxwOYQ==
+
 "@koa/cors@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.0.0.tgz#df021b4df2dadf1e2b04d7c8ddf93ba2d42519cb"