From d36d1f1b831e7ccbe4f8581fefb33727d7077974 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Tue, 7 Jan 2025 11:10:38 +0200
Subject: [PATCH] fix: use deep ref for selectedOptions reactivity closes #100

---
 packages/core/src/useSelect/useListBox.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/useSelect/useListBox.ts b/packages/core/src/useSelect/useListBox.ts
index 8196deb8..f761b4c6 100644
--- a/packages/core/src/useSelect/useListBox.ts
+++ b/packages/core/src/useSelect/useListBox.ts
@@ -1,5 +1,5 @@
 import { AriaLabelableProps, Maybe, Orientation, Reactivify } from '../types';
-import { computed, InjectionKey, nextTick, onBeforeUnmount, provide, ref, Ref, shallowRef, toValue, watch } from 'vue';
+import { computed, InjectionKey, nextTick, onBeforeUnmount, provide, ref, Ref, toValue, watch } from 'vue';
 import { hasKeyCode, normalizeProps, removeFirst, withRefCapture } from '../utils/common';
 import { useKeyPressed } from '../helpers/useKeyPressed';
 import { isMac } from '../utils/platform';
@@ -53,7 +53,7 @@ export function useListBox<TOption, TValue = TOption>(
 ) {
   const props = normalizeProps(_props);
   const listBoxEl = elementRef || ref<HTMLElement>();
-  const options = shallowRef<OptionRegistrationWithId<TValue>[]>([]);
+  const options = ref<OptionRegistrationWithId<TValue>[]>([]);
   // Initialize popover controller, NO-OP if the element is not a popover-enabled element.
   const { isOpen } = usePopoverController(listBoxEl, { disabled: props.disabled });
   const finder = useOptionFinder(options);