vue - update reactivity issues with cloning nested options

Author: brianvoe

src/slim-select/vue/helpers.ts

@@ -0,0 +1,23 @@
+import { isReactive, isRef, toRaw, unref } from 'vue'
+
+/** Recursively strip Vue reactivity so structuredClone won't throw on Proxy objects. */
+export function deepToRaw<T>(input: T): T {
+  const seen = new WeakMap<object, any>()
+  const convert = (val: any): any => {
+    if (isRef(val)) val = unref(val)
+    if (isReactive(val)) val = toRaw(val)
+    if (val === null || typeof val !== 'object') return val
+    if (seen.has(val)) return seen.get(val)
+    if (Array.isArray(val)) {
+      const arr: any[] = []
+      seen.set(val, arr)
+      for (const item of val) arr.push(convert(item))
+      return arr
+    }
+    const obj: Record<string, any> = {}
+    seen.set(val, obj)
+    for (const key of Object.keys(val)) obj[key] = convert(val[key])
+    return obj
+  }
+  return convert(input)
+}

src/slim-select/vue/vue.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, beforeEach, afterEach, vi } from 'vitest'
 import { mount, VueWrapper } from '@vue/test-utils'
-import { nextTick, PropType } from 'vue'
+import { nextTick, PropType, reactive } from 'vue'
 import SlimSelect, { Option, Events } from '@/slim-select'
 import SlimSelectVue from './vue.vue'
 
@@ -556,6 +556,44 @@ describe('SlimSelect Vue Component', () => {
   })
 
   describe('Reactivity Edge Cases', () => {
+    test('mounts when data prop contains nested reactive option objects', async () => {
+      const state = reactive({
+        items: [{ value: 'MLD', text: 'MLD' }]
+      })
+
+      const TestComponent = {
+        components: { SlimSelectVue },
+        template: `
+          <SlimSelectVue
+            v-model="selected"
+            :data="options"
+          />
+        `,
+        data() {
+          return {
+            selected: 'MLD' as string
+          }
+        },
+        computed: {
+          options() {
+            return [
+              { text: 'Select unit', value: '', placeholder: true },
+              ...state.items
+            ]
+          }
+        }
+      }
+
+      const testWrapper = mount(TestComponent)
+      await nextTick()
+
+      const slimComponent = testWrapper.findComponent(SlimSelectVue)
+      const slim = (slimComponent.vm as any).slim as SlimSelect
+      expect(slim).toBeInstanceOf(SlimSelect)
+      expect(slim.getSelected()).toEqual(['MLD'])
+      testWrapper.unmount()
+    })
+
     test('reactive data with v-model syncs without selected on options', async () => {
       const TestComponent = {
         components: { SlimSelectVue },

src/slim-select/vue/vue.vue

@@ -17,6 +17,7 @@ import SlimSelect, {
   Settings
 } from '../index'
 import { dataStructureEqual } from '../helpers'
+import { deepToRaw } from './helpers'
 
 export default defineComponent({
   name: 'SlimSelect',
@@ -75,7 +76,7 @@ export default defineComponent({
     }
 
     this.slim = new SlimSelect(config)
-    this.lastAppliedData = structuredClone(toRaw(this.data))
+    this.lastAppliedData = structuredClone(deepToRaw(this.data))
     // Push initial modelValue down without firing afterChange (no parent emit loop)
     this.syncModelValueToSlimSelect(false)
   },
@@ -104,7 +105,7 @@ export default defineComponent({
           return
         }
         this.slim.setData(newData)
-        this.lastAppliedData = structuredClone(toRaw(newData))
+        this.lastAppliedData = structuredClone(deepToRaw(newData))
         this.syncModelValueToSlimSelect(false)
       },
       deep: true