diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 7c841aa8c..16990dc41 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -8,11 +8,11 @@
 			<div class="banner"
 				:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
 				:title="$t('update-banner')"
-				@click="() => os.apis.updateBanner()"
+				@click="updateBanner()"
 			></div>
 			<mk-avatar class="avatar" :user="$store.state.i"
 				:disable-link="true"
-				@click="() => os.apis.updateAvatar()"
+				@click="updateAvatar()"
 				:title="$t('update-avatar')"
 			/>
 			<router-link class="name" :to="$store.state.i | userPage"><mk-user-name :user="$store.state.i"/></router-link>
@@ -25,6 +25,8 @@
 <script lang="ts">
 import define from '../../../common/define-widget';
 import i18n from '../../../i18n';
+import updateAvatar from '../../api/update-avatar';
+import updateBanner from '../../api/update-banner';
 
 export default define({
 	name: 'profile',
@@ -41,6 +43,12 @@ export default define({
 				this.props.design++;
 			}
 			this.save();
+		},
+		updateAvatar() {
+			updateAvatar(this.$root)();
+		},
+		updateBanner() {
+			updateBanner(this.$root)();
 		}
 	}
 });