diff --git a/resources/assets/js/stores/settingStore.spec.ts b/resources/assets/js/stores/settingStore.spec.ts
new file mode 100644
index 00000000..d74f5c5b
--- /dev/null
+++ b/resources/assets/js/stores/settingStore.spec.ts
@@ -0,0 +1,19 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import { settingStore } from '@/stores/settingStore'
+import { httpService } from '@/services'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('initializes the store', () => {
+      settingStore.init({ media_path: '/media/path' })
+      expect(settingStore.state.media_path).toEqual('/media/path')
+    })
+
+    it('updates the media path', async () => {
+      this.mock(httpService, 'put')
+      await settingStore.update({ media_path: '/dev/null' })
+      expect(settingStore.state.media_path).toEqual('/dev/null')
+    })
+  }
+}
diff --git a/resources/assets/js/stores/settingStore.ts b/resources/assets/js/stores/settingStore.ts
index 950afb59..e6c0d8b0 100644
--- a/resources/assets/js/stores/settingStore.ts
+++ b/resources/assets/js/stores/settingStore.ts
@@ -1,5 +1,6 @@
 import { reactive } from 'vue'
 import { httpService } from '@/services'
+import { merge } from 'lodash'
 
 export const settingStore = {
   state: reactive<Settings>({
@@ -7,11 +8,11 @@ export const settingStore = {
   }),
 
   init (settings: Settings) {
-    Object.assign(this.state, settings)
+    merge(this.state, settings)
   },
 
   async update (settings: Settings) {
     await httpService.put('settings', settings)
-    Object.assign(this.state, settings)
+    merge(this.state, settings)
   }
 }