diff --git a/src/Multiselect.vue b/src/Multiselect.vue
index 2d235ec..9dab941 100644
--- a/src/Multiselect.vue
+++ b/src/Multiselect.vue
@@ -10,7 +10,7 @@
     @mousedown.self="handleMousedown"
   >
     <select
-      v-model="selectedValues"
+      v-model="selectedOptionsRef"
       :multiple="multiple"
       v-bind="selectProps"
       class="hidden"
@@ -24,7 +24,6 @@
         :class="classList.search"
         v-bind="searchProps"
         data-cy="search-input"
-        @input="handleInput"
       >
     </template>
 
@@ -144,13 +143,11 @@
 
 <script lang="ts">
 import type {InputHTMLAttributes, PropType, SelectHTMLAttributes, SetupContext} from 'vue'
-import {defineComponent, toRefs, watch} from 'vue'
-import * as _ from 'lodash'
+import {defineComponent, toRefs} from 'vue'
 import useMultiselect from './utils/useMultiselect'
 import useDropdown from './utils/useDropdown'
 import useSearch from './utils/useSearch'
 import useOptions from './utils/useOptions'
-import useValue from './utils/useValue'
 import useClasses from './utils/useClasses'
 import type {Classes, Option} from './types'
 import useScroll from './utils/useScroll'
@@ -404,9 +401,8 @@ export default defineComponent({
   setup(props, context: SetupContext) {
     const {
       multiple, modelValue, searchable, disabled, closeOnSelect, selectOptions, displaySelectedValues,
-      optionValue, optionLabel, optionDisabled, optionSearchValue, classes, infinite, maxOptions,
+      optionValue, optionLabel, optionDisabled, optionSearchValue, classes, infinite, maxOptions, loadingOptions,
     } = toRefs(props)
-    const value = useValue(multiple, modelValue)
     const dropdown = useDropdown(context)
     const search = useSearch(context)
     const multiselect = useMultiselect(
@@ -414,7 +410,6 @@ export default defineComponent({
       disabled,
       multiple,
       context,
-      value.selectedValues,
       dropdown.openDropdown,
       dropdown.closeDropdown,
       search.clearSearch,
@@ -431,14 +426,15 @@ export default defineComponent({
       optionLabel,
       optionDisabled,
       optionSearchValue,
+      infinite,
       context,
-      value.selectedValues,
       multiselect.deactivate,
       search.search,
     )
     const scroll = useScroll(
       infinite,
       maxOptions,
+      loadingOptions,
       selectOptions,
       context,
     )
@@ -452,20 +448,7 @@ export default defineComponent({
       multiselect.isActive,
     )
 
-    watch(() => props.selectOptions, (newOptions, oldOptions) => {
-      if (newOptions && newOptions.length > 0) {
-        for (const option of oldOptions) {
-          if (!_.some(newOptions, option as never) && options.isSelected(option, options.selectedOptions.value))
-            options.deselect(option)
-        }
-      }
-      else {
-        multiselect.clear()
-      }
-    })
-
     return {
-      ...value,
       ...dropdown,
       ...search,
       ...options,
diff --git a/src/stories/MultiselectTester.stories.js b/src/stories/MultiselectTester.stories.js
index f12da2e..0a0014d 100644
--- a/src/stories/MultiselectTester.stories.js
+++ b/src/stories/MultiselectTester.stories.js
@@ -40,6 +40,6 @@ const Template = args => ({
 export const TesterComponent = Template.bind({})
 TesterComponent.args = {
   placeholder: 'huhu',
-  selectOptions: [{value: 1, label: 'Wie'}, {value: 'hallo', label: 'geht'}, {value: {nested: 'juhu'}, label: 'es'}, {value: true, label: 'dir'}],
+  selectOptions: [{value: 1, label: 'Wie'}, {value: 'hallo', label: 'geht'}, {value: {nested: 'juhu'}, label: 'es'}, {value: true, label: 'dir'}, {value: 3, label: 'du'}, {value: 4, label: 'bist'}, {value: 5, label: 'ganz'}, {value: 6, label: 'schön'}, {value: 7, label: 'cool'}],
   vModel: true,
 }
diff --git a/src/tests/MultiselectTester.vue b/src/tests/MultiselectTester.vue
index c3c4000..3e6a55a 100644
--- a/src/tests/MultiselectTester.vue
+++ b/src/tests/MultiselectTester.vue
@@ -91,6 +91,15 @@
         Change select Options
       </button>
     </div>
+    <div v-if="infinite && dynamicOptions">
+      <button
+        class="mt-4 text-center w-full border-2 bg-gray-100"
+        data-cy="changeOptionsButton"
+        @click="addOption"
+      >
+        Add option with illegal value
+      </button>
+    </div>
     <div v-if="testExposedFunctions">
       <button
         class="mt-4 text-center w-full border-2 bg-gray-100"
@@ -274,7 +283,7 @@ export default defineComponent({
           value = [value]
           selected.value = value
         }
-        else if (setValue.value && !multiple.value) {
+        else if (!multiple.value) {
           selected.value = value
         }
         else if (!setValue.value && Array.isArray(selected.value)) {
@@ -291,7 +300,7 @@ export default defineComponent({
           selected.value = [value, secondValue]
         }
 
-        else if (setValue.value && !multiple.value) {
+        else if (!multiple.value) {
           selected.value = value
         }
 
@@ -301,7 +310,7 @@ export default defineComponent({
       }
     }
 
-    const dynamicSelectOptions = ref<Option[]>([
+    const dynamicSelectOptions = ref<Array<Option | unknown>>([
       {value: {abc: 'xyz', test: {xyz: 3}}, label: 'This'},
       {value: 2, label: 'is'},
       {value: 'haha', label: 'a'},
@@ -315,6 +324,11 @@ export default defineComponent({
       ]
     }
 
+    function addOption() {
+      const option = {value: {this: 'Hallo', is: 1234, a: {Test: 'okayyy, let\'s go'}}, label: 'jooooooo'}
+      dynamicSelectOptions.value.push(option)
+    }
+
     const multiselect = ref<typeof Multiselect | null>(null)
 
     function testFocus() {
@@ -333,6 +347,7 @@ export default defineComponent({
       pushIllegalValue,
       dynamicSelectOptions,
       changeSelectOptions,
+      addOption,
       testFocus,
       testBlur,
       multiselect,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 7befe09..72724d0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -6,4 +6,3 @@ export {default as useDropdown} from './useDropdown'
 export {default as useMultiselect} from './useMultiselect'
 export {default as useOptions} from './useOptions'
 export {default as useSearch} from './useSearch'
-export {default as useValue} from './useValue'
diff --git a/src/utils/useMultiselect.ts b/src/utils/useMultiselect.ts
index 08fc3cc..6a9b3cc 100644
--- a/src/utils/useMultiselect.ts
+++ b/src/utils/useMultiselect.ts
@@ -5,7 +5,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
   disabled: Ref<boolean>,
   multiple: Ref<boolean>,
   context: SetupContext,
-  selectedValues: Ref,
   openDropdown: () => void,
   closeDropdown: () => void,
   clearSearch: () => void,
@@ -36,17 +35,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
     }
   }
 
-  function clear() {
-    if (multiple.value)
-      selectedValues.value.length = 0
-    else
-      selectedValues.value = null
-
-    deactivate()
-    context.emit('update:modelValue', selectedValues.value)
-    context.emit('clear')
-  }
-
   function handleFocus() {
     input.value?.focus()
   }
@@ -80,7 +68,6 @@ export default function useMultiselect(searchable: Ref<boolean>,
     tabindex,
     activate,
     deactivate,
-    clear,
     handleMousedown,
     handleFocus,
   }
diff --git a/src/utils/useOptions.ts b/src/utils/useOptions.ts
index 02bc15b..14f9704 100644
--- a/src/utils/useOptions.ts
+++ b/src/utils/useOptions.ts
@@ -1,6 +1,6 @@
 import * as _ from 'lodash'
 import type {Ref, SetupContext} from 'vue'
-import {computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import type {Option} from '../types'
 
 export default function useOptions(multiple: Ref<boolean>,
@@ -12,75 +12,95 @@ export default function useOptions(multiple: Ref<boolean>,
   optionLabel: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
   optionDisabled: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => boolean>,
   optionSearchValue: Ref<(option: Option | unknown, selectedOptions: Array<Option | unknown>) => string>,
+  infinite: Ref<boolean>,
   context: SetupContext,
-  selectedValues: Ref,
   deactivate: () => void,
   search: Ref<string>) {
-  function isSelected(option: Option | unknown, selectedOptions: Array<Option | unknown>) {
-    if (multiple.value) {
-      let find = null
-      if (selectedValues.value && selectedValues.value.length > 0) {
-        if (selectedValues.value.includes(optionValue.value(option, selectedOptions)))
-          return true
-
-        // enable pushing values into modelValue correctly
-        find = selectedValues.value.find((value: unknown, index: number) => {
-          if (_.isEqual(value, optionValue.value(option, selectedOptions))) {
-            // update value if option was pushed externally, because identical objects aren't equal
-            if (selectedValues.value[index] !== optionValue.value(option, selectedOptions))
-              selectedValues.value.splice(index, 1, optionValue.value(option, selectedOptions))
-            return true
-          }
-          return false
-        })
-      }
-      return !!find
-    }
-    else {
-      if ((selectedValues.value || selectedValues.value === 0 || selectedValues.value === '')
-          && _.isEqual(selectedValues.value, optionValue.value(option, selectedOptions))) {
-        if (selectedValues.value !== optionValue.value(option, selectedOptions))
-          selectedValues.value = optionValue.value(option, selectedOptions)
+  const selectedOptionsRef = ref<Array<Option | unknown>>([])
+
+  const optionMap = computed<Map<string, Option | unknown>>(() => {
+    const map = new Map<string, Option | unknown>()
+    selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+    selectOptions.value.forEach((option: Option | unknown) => {
+      const valueString = JSON.stringify(optionValue.value(option, selectedOptionsRef.value))
+      map.set(valueString, option)
+    })
+    return map
+  })
 
-        return true
-      }
-      else {
-        return false
-      }
-    }
+  function isSelected(option: Option | unknown) {
+    return selectedOptionsRef.value.some((selectedOption) => {
+      return _.isEqual(optionValue.value(selectedOption, selectedOptionsRef.value), optionValue.value(option, selectedOptionsRef.value))
+    })
   }
 
-  const selectedOptions = computed<Array<Option | unknown>>(() => {
-    const selected = []
-    for (const option of selectOptions.value) {
-      if (isSelected(option, selectedOptions.value))
-        selected.push(option)
+  function updateModelValue(options: Array<Option | unknown>) {
+    let value
+    if (multiple.value) {
+      value = []
+      options.forEach((option) => {
+        value.push(optionValue.value(option, options))
+      })
     }
-
-    // prevents from pushing illegal stuff in single mode
-    if (!multiple.value && selectedValues.value !== null && selected.length === 0) {
-      selectedValues.value = null
-      context.emit('update:modelValue', selectedValues.value)
+    else {
+      value = null
+      if (options.length > 0)
+        value = optionValue.value(options[0], options)
     }
-    return selected
-  })
+    context.emit('update:modelValue', value)
+  }
 
-  // for correctly setting modelValue in multiple mode
-  watch(() => selectedOptions.value, (selected) => {
-    if (multiple.value && Array.isArray(selectedValues.value) && selectedValues.value.length > selected.length) {
-      const correctValues: Array<unknown> = []
-      selected.forEach((value) => {
-        const selectedOptionValue = optionValue.value(value, [])
-        if (_.includes(selectedValues.value, selectedOptionValue))
-          correctValues.push(selectedOptionValue)
+  const selectedOptions = computed<Array<Option | unknown>>({
+    get() {
+      selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+      return selectedOptionsRef.value
+    },
+    set(values) {
+      let correctValues: Array<unknown> = []
+      const correctOptions: Array<Option | unknown> = []
+      values.forEach((value) => {
+        const option = optionMap.value.get(JSON.stringify(value))
+        if (option) {
+          correctValues.push(value)
+          correctOptions.push(option)
+          if (!isSelected(option)) {
+            selectedOptionsRef.value.push(option)
+            context.emit('select', option)
+          }
+          // overwrite option without label
+          else if (infinite.value) {
+            selectedOptionsRef.value.push(option)
+          }
+        }
+        else if (infinite.value) {
+          correctValues.push(value)
+          if (!isSelected({value})) {
+            correctOptions.push({value})
+            selectedOptionsRef.value.push({value})
+            context.emit('select', {value})
+          }
+          // keeps remembered Option
+          else {
+            const rememberedOption = selectedOptionsRef.value.find((selectedOption) => {
+              return _.isEqual(value, optionValue.value(selectedOption, selectedOptionsRef.value))
+            })
+            correctOptions.push(rememberedOption)
+          }
+        }
       })
-      selectedValues.value = correctValues
-      context.emit('update:modelValue', selectedValues.value)
-    }
+      correctValues = _.uniq(correctValues)
+      selectedOptionsRef.value = _.uniq(selectedOptionsRef.value)
+
+      if (!_.isEqual(selectedOptionsRef.value, correctOptions))
+      // TODO maybe emit deselected values too ?
+        selectedOptionsRef.value = correctOptions
+      if (!_.isEqual(values, correctValues))
+        context.emit('update:modelValue', multiple.value ? correctValues : correctValues[0])
+    },
   })
 
   const shownOptions = computed<Array<Option | unknown>>(() => {
-    if (search && search.value) {
+    if (!infinite.value && search && search.value) {
       return (selectOptions.value as Option[]).filter((option: Option | unknown) => {
         return optionSearchValue.value(option, selectedOptions.value).toLowerCase().includes(search.value.toLowerCase())
       })
@@ -92,42 +112,61 @@ export default function useOptions(multiple: Ref<boolean>,
 
   const noResults = computed(() => search && search.value && shownOptions.value && shownOptions.value.length === 0)
 
-  watch(modelValue.value, () => {
-    // prevents from pushing things that aren't options and pushing the same option multiple times in multiple mode
-    if (multiple.value && (selectedOptions.value as Array<Option | unknown>).length < selectedValues.value.length)
-      selectedValues.value.pop()
+  watch(() => modelValue.value, (value) => {
+    selectedOptions.value = _.isArray(value) ? value : [value]
+  }, {deep: true})
+
+  watch(optionMap, (newMap, oldMap) => {
+    if (!_.isEqual(newMap, oldMap))
+      selectedOptions.value = _.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
   })
 
   function select(option: Option | unknown) {
-    multiple.value ? selectedValues.value.push(optionValue.value(option, selectedOptions.value)) : selectedValues.value = optionValue.value(option, selectedOptions.value)
-    context.emit('select', option)
-    context.emit('update:modelValue', selectedValues.value)
-    if (closeOnSelect.value)
-      deactivate()
+    if (!isSelected(option)) {
+      multiple.value ? selectedOptionsRef.value.push(option) : selectedOptionsRef.value = [option]
+      context.emit('select', option)
+      updateModelValue(selectedOptions.value)
+      if (closeOnSelect.value)
+        deactivate()
+    }
   }
 
   function deselect(option: Option | unknown) {
-    if (multiple.value) {
-      const index = selectedValues.value.indexOf(optionValue.value(option, selectedOptions.value))
-      selectedValues.value.splice(index, 1)
-    }
-    else {
-      selectedValues.value = null
+    if (isSelected(option)) {
+      if (multiple.value) {
+        selectedOptionsRef.value = selectedOptionsRef.value.filter((selectedOption) => {
+          return !_.isEqual(selectedOption, option)
+        })
+      }
+      else {
+        selectedOptionsRef.value.length = 0
+      }
+      context.emit('deselect', option)
+      updateModelValue(selectedOptions.value)
     }
-    context.emit('deselect', option)
-    context.emit('update:modelValue', selectedValues.value)
   }
 
   function handleOptionClick(option: Option | unknown) {
     if (optionDisabled.value(option, selectedOptions.value))
       return
 
-    if (isSelected(option, selectedOptions.value))
+    if (isSelected(option))
       deselect(option)
     else
       select(option)
   }
 
+  const noSelection = computed(() => {
+    return selectedOptions.value.length === 0
+  })
+
+  function clear() {
+    selectedOptionsRef.value.length = 0
+    deactivate()
+    context.emit('clear')
+    updateModelValue(selectedOptions.value)
+  }
+
   const valueDisplayText = computed(() => {
     if (multiple.value) {
       if (displaySelectedValues && displaySelectedValues.value) {
@@ -150,10 +189,13 @@ export default function useOptions(multiple: Ref<boolean>,
     noOptions,
     shownOptions,
     noResults,
+    selectedOptionsRef,
     selectedOptions,
     isSelected,
     handleOptionClick,
     deselect,
     valueDisplayText,
+    noSelection,
+    clear,
   }
 }
diff --git a/src/utils/useScroll.ts b/src/utils/useScroll.ts
index 14f4e18..55ffd6a 100644
--- a/src/utils/useScroll.ts
+++ b/src/utils/useScroll.ts
@@ -1,10 +1,12 @@
 import type {Ref, SetupContext} from 'vue'
 import {computed} from 'vue'
 import type {Option} from '../types'
+import _ from "lodash";
 
 export default function useScroll(
   infinite: Ref<boolean>,
   maxOptions: Ref<number>,
+  loadingOptions: Ref<boolean>,
   selectOptions: Ref<Array<Option | unknown>>,
   context: SetupContext,
 ) {
@@ -12,11 +14,11 @@ export default function useScroll(
     return selectOptions.value.length < maxOptions.value
   })
 
-  function handleScroll(e: Event) {
+  const handleScroll = _.debounce((e: Event) => {
     const {scrollTop, offsetHeight, scrollHeight} = e.target as HTMLDivElement
-    if (scrollTop + offsetHeight >= scrollHeight && hasMore.value)
+    if (scrollTop + offsetHeight >= scrollHeight && hasMore.value && !loadingOptions.value)
       context.emit('loadMore')
-  }
+  }, 50)
 
   return {
     hasMore,
diff --git a/src/utils/useSearch.ts b/src/utils/useSearch.ts
index 4e70224..460c5bc 100644
--- a/src/utils/useSearch.ts
+++ b/src/utils/useSearch.ts
@@ -1,26 +1,28 @@
 import type {SetupContext} from 'vue'
-import {ref, watch} from 'vue'
+import {computed, ref} from 'vue'
 
 export default function useSearch(context: SetupContext) {
   const input = ref<HTMLInputElement | null>(null)
-  const search = ref('')
+  const searchString = ref('')
 
-  function clearSearch() {
-    search.value = ''
-  }
+  const search = computed<string>({
+    get() {
+      return searchString.value
+    },
+    set(val) {
+      searchString.value = val
+      context.emit('search-change', val)
+    },
+  })
 
-  function handleInput(e: InputEvent) {
-    search.value = (e.target as HTMLInputElement).value
+  function clearSearch() {
+    if (search.value)
+      search.value = ''
   }
 
-  watch(search, (val) => {
-    context.emit('search-change', val)
-  })
-
   return {
     search,
     clearSearch,
-    handleInput,
     input,
   }
 }
diff --git a/src/utils/useValue.ts b/src/utils/useValue.ts
deleted file mode 100644
index 5725d5c..0000000
--- a/src/utils/useValue.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type {Ref} from 'vue'
-import {computed, ref, watch} from 'vue'
-
-export default function useValue(multiple: Ref<boolean>, modelValue: Ref) {
-  const selectedValues = ref(modelValue.value)
-
-  // for externally pushing things -> updates selectedValues
-  watch(() => modelValue.value, (newValue) => {
-    if (newValue !== selectedValues.value)
-      selectedValues.value = modelValue.value
-  })
-
-  const noSelection = computed(() => {
-    if (multiple.value)
-      return !(selectedValues.value && selectedValues.value.length > 0)
-    else
-      return !(selectedValues.value || selectedValues.value === 0 || selectedValues.value === '')
-  })
-
-  return {
-    selectedValues,
-    noSelection,
-  }
-}