diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts
index 8cd5ed464d..24db5cc152 100644
--- a/src/client/directives/index.ts
+++ b/src/client/directives/index.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import { App } from 'vue';
 
 import userPreview from './user-preview';
 import autocomplete from './autocomplete';
@@ -6,9 +6,11 @@ import size from './size';
 import particle from './particle';
 import tooltip from './tooltip';
 
-Vue.directive('autocomplete', autocomplete);
-Vue.directive('userPreview', userPreview);
-Vue.directive('user-preview', userPreview);
-Vue.directive('size', size);
-Vue.directive('particle', particle);
-Vue.directive('tooltip', tooltip);
+export default function(app: App) {
+	//app.directive('autocomplete', autocomplete);
+	//app.directive('userPreview', userPreview);
+	//app.directive('user-preview', userPreview);
+	app.directive('size', size);
+	//app.directive('particle', particle);
+	//app.directive('tooltip', tooltip);
+}
diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts
index 2b589662ff..0604a797c0 100644
--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -1,5 +1,9 @@
+import { Directive } from 'vue';
+
+//const observers = new Map<Element, ResizeObserver>();
+
 export default {
-	inserted(el, binding, vn) {
+	mounted(el, binding, vn) {
 		const query = binding.value;
 
 		/*
@@ -52,7 +56,9 @@ export default {
 
 		calc();
 
-		vn.context.$on('hook:activated', calc);
+		// Vue3では使えなくなった
+		// 無くても大丈夫か...？
+		//vn.context.$on('hook:activated', calc);
 
 		const ro = new ResizeObserver((entries, observer) => {
 			calc();
@@ -60,10 +66,12 @@ export default {
 
 		ro.observe(el);
 
+		// TODO: 新たにプロパティを作るのをやめMapを使う
+		// ただメモリ的には↓の方が省メモリかもしれないので検討中
 		el._ro_ = ro;
 	},
 
-	unbind(el, binding, vn) {
+	unmounted(el, binding, vn) {
 		el._ro_.unobserve(el);
 	}
-};
+} as Directive;
diff --git a/src/client/init.ts b/src/client/init.ts
index d3e2a843e5..ea35493aac 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -15,6 +15,7 @@ import Root from './root.vue';
 import FontAwesomeIcon from './components/fa.vue';
 import Stream from './scripts/stream';
 import widgets from './widgets';
+import directives from './directives';
 import { version, langs, getLocale, apiUrl } from './config';
 import { store } from './store';
 import { router } from './router';
@@ -170,8 +171,8 @@ app.component('fa', FontAwesomeIcon);
 //#endregion
 
 widgets(app);
+directives(app);
 
-//require('./directives');
 //require('./components');
 
 document.body.innerHTML = '<div id="app"></div>';
diff --git a/src/client/root.vue b/src/client/root.vue
index a460dd95a0..8d8bf3f7af 100644
--- a/src/client/root.vue
+++ b/src/client/root.vue
@@ -22,6 +22,7 @@ export default defineComponent({
 	},
 
 	props: {
+		// TODO: propで渡すとvueによって無駄なobserveがされるのでどうにかする
 		stream: {
 
 		},