diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
index 8b0b7cf29..acced4479 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed, Ref } from 'vue';
 
 const props = defineProps<{
-	emojis: string[];
+	emojis: string[] | Ref<string[]>;
 	initialShown?: boolean;
 }>();
 
@@ -29,5 +29,7 @@ const emit = defineEmits<{
 	(ev: 'chosen', v: string, event: MouseEvent): void;
 }>();
 
+const emojis = computed(() => Array.isArray(props.emojis) ? props.emojis : props.emojis.value);
+
 const shown = ref(!!props.initialShown);
 </script>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
index 3399124e8..b288cb22f 100644
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -60,7 +60,7 @@
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
+			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="computed(() => customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':'))" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
 		</div>
 		<div v-once class="group">
 			<header class="_acrylic">{{ i18n.ts.emoji }}</header>