diff --git a/src/client/components/avatar.vue b/src/client/components/avatar.vue
index 3a1b892440..5623b40705 100644
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -1,8 +1,8 @@
 <template>
-<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" @click="onClick">
 	<img class="inner" :src="url"/>
 </span>
-<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<router-link class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else>
 	<img class="inner" :src="url"/>
 </router-link>
 </template>
@@ -10,11 +10,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { UserPreview } from '@/scripts/user-preview';
 import { acct, userPage } from '../filters/user';
 import * as os from '@/os';
 
 export default defineComponent({
-	emits: ['click'],
 	props: {
 		user: {
 			type: Object,
@@ -33,6 +33,7 @@ export default defineComponent({
 			default: false
 		}
 	},
+	emits: ['click'],
 	computed: {
 		cat(): boolean {
 			return this.user.isCat;
@@ -50,6 +51,10 @@ export default defineComponent({
 	},
 	mounted() {
 		this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+
+		if (!this.disablePreview) {
+			new UserPreview(this.$el, this.user.id);
+		}
 	},
 	methods: {
 		getBlurhashAvgColor(s) {
diff --git a/src/client/components/mention.vue b/src/client/components/mention.vue
index 50b43df07b..e5754aeca5 100644
--- a/src/client/components/mention.vue
+++ b/src/client/components/mention.vue
@@ -1,5 +1,5 @@
 <template>
-<router-link class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
+<router-link class="ldlomzub" :class="{ isMe }" :to="url" v-if="url.startsWith('/')">
 	<span class="me" v-if="isMe">{{ $t('you') }}</span>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
@@ -18,6 +18,7 @@
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { host as localHost } from '@/config';
+import { UserPreview } from '@/scripts/user-preview';
 import { wellKnownServices } from '../../well-known-services';
 import * as os from '@/os';
 
@@ -55,6 +56,9 @@ export default defineComponent({
 			);
 		}
 	},
+	mounted() {
+		new UserPreview(this.$el, this.canonical);
+	},
 	methods: {
 		toUnicode
 	}
diff --git a/src/client/components/note-header.vue b/src/client/components/note-header.vue
index 8b59fb9d3b..c5b01d37c6 100644
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -1,6 +1,6 @@
 <template>
 <header class="kkwtjztg">
-	<router-link class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+	<router-link class="name" :to="userPage(note.user)" ref="name">
 		<mk-user-name :user="note.user"/>
 	</router-link>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
@@ -26,6 +26,7 @@
 import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import { UserPreview } from '@/scripts/user-preview';
 import notePage from '../filters/note';
 import { userPage } from '../filters/user';
 import * as os from '@/os';
@@ -44,6 +45,10 @@ export default defineComponent({
 		};
 	},
 
+	mounted() {
+		new UserPreview(this.$refs.name.$el, this.note.user.id);
+	},
+
 	methods: {
 		notePage,
 		userPage
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index a83353ebfa..5116f9ff37 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -1,6 +1,6 @@
 <template>
-<transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-	<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
+<transition name="popup" appear @after-leave="$emit('closed')">
+	<div v-if="show && showing" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
 		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
@@ -39,6 +39,10 @@ export default defineComponent({
 	},
 
 	props: {
+		showing: {
+			type: Boolean,
+			required: true
+		},
 		user: {
 			type: [Object, String],
 			required: true
@@ -48,6 +52,8 @@ export default defineComponent({
 		}
 	},
 
+	emits: ['closed', 'mouseover', 'mouseleave'],
+
 	data() {
 		return {
 			u: null,
diff --git a/src/client/directives/index.ts b/src/client/directives/index.ts
index 4e14535e09..1a11a774fa 100644
--- a/src/client/directives/index.ts
+++ b/src/client/directives/index.ts
@@ -1,13 +1,10 @@
 import { App } from 'vue';
 
-import userPreview from './user-preview';
 import size from './size';
 import particle from './particle';
 import tooltip from './tooltip';
 
 export default function(app: App) {
-	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/user-preview.ts b/src/client/directives/user-preview.ts
deleted file mode 100644
index f4f32d1146..0000000000
--- a/src/client/directives/user-preview.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Directive } from 'vue';
-import MkUserPreview from '@/components/user-preview.vue';
-
-export default {
-	// modal側でcontentのmouseoverイベントなどを発行してもらう必要がありそう
-	/*
-	mounted(el: HTMLElement, binding, vn) {
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		// ただメモリ的には↓の方が省メモリかもしれないので検討中
-		const self = (el as any)._userPreviewDirective_ = {} as any;
-
-		self.user = binding.value;
-		self.close = null;
-		self.showTimer = null;
-		self.hideTimer = null;
-		self.checkTimer = null;
-
-		self.close = () => {
-			if (self.close) {
-				clearInterval(self.checkTimer);
-				self.close.close();
-				self.close = null;
-			}
-		};
-
-		const show = () => {
-			if (!document.body.contains(el)) return;
-			if (self.close) return;
-
-			self.close = os.popup(MkUserPreview, {
-				user: self.user,
-				source: el
-			});
-
-			self.close.$on('mouseover', () => {
-				clearTimeout(self.hideTimer);
-			});
-
-			self.close.$on('mouseleave', () => {
-				clearTimeout(self.showTimer);
-				self.hideTimer = setTimeout(self.close, 500);
-			});
-
-			self.checkTimer = setInterval(() => {
-				if (!document.body.contains(el)) {
-					clearTimeout(self.showTimer);
-					clearTimeout(self.hideTimer);
-					self.close();
-				}
-			}, 1000);
-		};
-
-		el.addEventListener('mouseover', () => {
-			clearTimeout(self.showTimer);
-			clearTimeout(self.hideTimer);
-			self.showTimer = setTimeout(show, 500);
-		});
-
-		el.addEventListener('mouseleave', () => {
-			clearTimeout(self.showTimer);
-			clearTimeout(self.hideTimer);
-			self.hideTimer = setTimeout(self.close, 500);
-		});
-
-		el.addEventListener('click', () => {
-			clearTimeout(self.showTimer);
-			self.close();
-		});
-	},
-
-	unmounted(el, binding, vn) {
-		const self = el._userPreviewDirective_;
-		clearInterval(self.checkTimer);
-	}*/
-} as Directive;
diff --git a/src/client/scripts/user-preview.ts b/src/client/scripts/user-preview.ts
new file mode 100644
index 0000000000..87f3808ef0
--- /dev/null
+++ b/src/client/scripts/user-preview.ts
@@ -0,0 +1,89 @@
+import autobind from 'autobind-decorator';
+import { popup } from '@/os';
+
+export class UserPreview {
+	private el;
+	private user;
+	private showTimer;
+	private hideTimer;
+	private checkTimer;
+	private promise;
+
+	constructor(el, user) {
+		this.el = el;
+		this.user = user;
+
+		this.attach();
+	}
+
+	@autobind
+	private async show() {
+		if (!document.body.contains(this.el)) return;
+		if (this.promise) return;
+
+		this.promise = popup(await import('@/components/user-preview.vue'), {
+			user: this.user,
+			source: this.el
+		}, {
+			mouseover: () => {
+				clearTimeout(this.hideTimer);
+			},
+			mouseleave: () => {
+				clearTimeout(this.showTimer);
+				this.hideTimer = setTimeout(this.close, 500);
+			},
+		});
+
+		this.checkTimer = setInterval(() => {
+			if (!document.body.contains(this.el)) {
+				clearTimeout(this.showTimer);
+				clearTimeout(this.hideTimer);
+				this.close();
+			}
+		}, 1000);
+	}
+
+	@autobind
+	private close() {
+		if (this.promise) {
+			clearInterval(this.checkTimer);
+			this.promise.cancel();
+			this.promise = null;
+		}
+	}
+
+	@autobind
+	private onMouseover() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		this.showTimer = setTimeout(this.show, 500);
+	}
+
+	@autobind
+	private onMouseleave() {
+		clearTimeout(this.showTimer);
+		clearTimeout(this.hideTimer);
+		this.hideTimer = setTimeout(this.close, 500);
+	}
+
+	@autobind
+	private onClick() {
+		clearTimeout(this.showTimer);
+		this.close();
+	}
+
+	@autobind
+	public attach() {
+		this.el.addEventListener('mouseover', this.onMouseover);
+		this.el.addEventListener('mouseleave', this.onMouseleave);
+		this.el.addEventListener('click', this.onClick);
+	}
+
+	@autobind
+	public detach() {
+		this.el.removeEventListener('mouseover', this.onMouseover);
+		this.el.removeEventListener('mouseleave', this.onMouseleave);
+		this.el.removeEventListener('click', this.onClick);
+		clearInterval(this.checkTimer);
+	}
+}