diff --git a/components/publish/PublishEmojiPicker.client.vue b/components/publish/PublishEmojiPicker.client.vue
index 255cafdc..fd2044d1 100644
--- a/components/publish/PublishEmojiPicker.client.vue
+++ b/components/publish/PublishEmojiPicker.client.vue
@@ -10,8 +10,14 @@ const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
 
 async function openEmojiPicker() {
-  if (!picker) {
-    await updateCustomEmojis()
+  await updateCustomEmojis()
+  if (picker) {
+    picker.update({
+      theme: isDark.value ? 'dark' : 'light',
+      custom: customEmojisData.value,
+    })
+  }
+  else {
     const promise = import('@emoji-mart/data').then(r => r.default)
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
@@ -28,28 +34,16 @@ async function openEmojiPicker() {
   el?.appendChild(picker as any as HTMLElement)
 }
 
-const hidePicker = () => {
+const hideEmojiPicker = () => {
   if (picker)
     el?.removeChild(picker as any as HTMLElement)
 }
-
-watch(isDark, () => {
-  picker?.update({
-    theme: isDark.value ? 'dark' : 'light',
-  })
-})
-
-watch(customEmojisData, () => {
-  picker?.update({
-    custom: customEmojisData.value,
-  })
-})
 </script>
 
 <template>
   <VDropdown
     @apply-show="openEmojiPicker()"
-    @apply-hide="hidePicker()"
+    @apply-hide="hideEmojiPicker()"
   >
     <button btn-action-icon :title="$t('tooltip.emoji')">
       <div i-ri:emotion-line />