diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
index 434e7b693..7517f5bd0 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import apis from '/@/lib/apis'
 import { ChannelId } from '/@/types/entity-ids'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -31,17 +31,20 @@ const { channelsMap } = useChannelsStore()
 const remoteTopic = computed(
   () => channelsMap.value.get(props.channelId)?.topic ?? ''
 )
-const { localValue: localTopic, isEditing } = useLocalInput(
-  remoteTopic,
-  async topic => {
-    try {
-      await apis.editChannelTopic(props.channelId, { topic })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
+const {
+  localValue: localTopic,
+  isEditing,
+  sync
+} = useLocalInput(remoteTopic, async topic => {
+  try {
+    await apis.editChannelTopic(props.channelId, { topic })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
   }
-)
+})
+
+watch(() => props.channelId, sync)
 </script>
diff --git a/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue b/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
index ce67f7c7f..842a573f2 100644
--- a/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
+++ b/src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { ClipFolderId } from '/@/types/entity-ids'
 import apis from '/@/lib/apis'
 import router, {
@@ -69,17 +69,21 @@ const { localValue: localName, isEditing: isNameEditing } = useLocalInput(
   }
 )
 
-const { localValue: localDescription, isEditing: isDescriptionEditing } =
-  useLocalInput(remoteDescription, async description => {
-    try {
-      await apis.editClipFolder(props.clipFolderId, { description })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
-  })
+const {
+  localValue: localDescription,
+  isEditing: isDescriptionEditing,
+  sync
+} = useLocalInput(remoteDescription, async description => {
+  try {
+    await apis.editClipFolder(props.clipFolderId, { description })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
+  }
+})
+watch(() => props.clipFolderId, sync)
 
 const { defaultChannelName } = useBrowserSettings()
 
diff --git a/src/composables/utils/useLocalInput.ts b/src/composables/utils/useLocalInput.ts
index 2f9ca6093..09e1f2739 100644
--- a/src/composables/utils/useLocalInput.ts
+++ b/src/composables/utils/useLocalInput.ts
@@ -28,7 +28,11 @@ const useLocalInput = <T>(
     }
   })
 
-  return { localValue, isEditing }
+  const sync = () => {
+    localValue.value = remoteValue.value
+  }
+
+  return { localValue, isEditing, sync }
 }
 
 export default useLocalInput
diff --git a/tests/unit/composables/utils/useLocalInput.spec.ts b/tests/unit/composables/utils/useLocalInput.spec.ts
index f449148a7..2ee8f4fd9 100644
--- a/tests/unit/composables/utils/useLocalInput.spec.ts
+++ b/tests/unit/composables/utils/useLocalInput.spec.ts
@@ -54,7 +54,7 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(true)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     expect(f).not.toHaveBeenCalled()
@@ -70,11 +70,22 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(false)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     isEditing.value = false
     await nextTick()
     expect(isEditing.value).toBe(true)
   })
+
+  it('sync function works', async () => {
+    const f = vi.fn().mockReturnValue(false)
+
+    const remoteValue = ref('1')
+    const { localValue, isEditing, sync } = useLocalInput(remoteValue, f)
+    isEditing.value = true
+    localValue.value = '2'
+    sync()
+    expect(localValue.value).toBe('1')
+  })
 })