fix: do not falsely consider a selected option to be absent if it was added and selected at the same time

Fixes vueform#446

Author: odzhychko

src/composables/useOptions.js

@@ -807,7 +807,11 @@ export default function useOptions (props, context, dep)
     }
   })
 
-  watch(ev, (newValue) => {
+  // `eo` is used in `getOption`.
+  // `getOption` is used in `makeInternal`.
+  // `makeInternal` in this the callback`
+  // Therefore `eo` must be declared as source.
+  watch([ev, eo], ([newValue, _]) => {
     if (isNullish(newValue)) {
       update(makeInternal(newValue), false)
       return

tests/unit/Multiselect.spec.js

@@ -1,10 +1,14 @@
 import { createSelect, destroy, keyup, keydown, findAll, getValue } from 'unit-test-helpers'
 import { toBeVisible } from '@testing-library/jest-dom/matchers'
-import { nextTick } from 'vue'
+import { ref, nextTick, version } from 'vue'
+import Multiselect from './../../src/Multiselect.vue'
+import { mount } from '@vue/test-utils'
 import testSearch from './helpers/testSearch'
 
 expect.extend({toBeVisible})
 
+const describeVue3Only = (version.startsWith('3') ? describe : describe.skip)
+
 describe('Multiselect', () => {
   describe('General', () => {
     it('should render Multiselect', () => {
@@ -686,5 +690,31 @@ describe('Multiselect', () => {
         expect(getValue(select)).toStrictEqual([0,1])
       })
     })
+
+    describeVue3Only('Composition API', () => {
+      // This test is only possible with Vue 3 because the Composition API is used.
+      it('show selected option when added', async () => {
+        const values = ref(['option1'])
+        const options = ref(['option2'])
+    
+        const wrapper = mount(Multiselect, {
+          props: {
+            mode: 'tags',
+            value: values,
+            options: options,
+            // this is the default, it is set to highlight the fact
+            allowAbsent: false,
+          },
+        })
+    
+        options.value = ['option1', 'option2']
+        values.value = ['option1', 'option2']
+    
+        await nextTick()
+    
+        const selectedValues = wrapper.findAll(".multiselect-tag").map(tag => tag.text())
+        expect(selectedValues).toEqual(['option1', "option2"])
+      })
+    })
   })
 })