Multiselect deselect default values in child component

Question

I'm trying to use this multi-select component as a child component in a Edit.vue component (parent)

Parent component

<template>
   <Multiselect v-model="form.user_id" :options="users"></Multiselect>
</template>

<script setup>
const props = defineProps({
    users: Array,
    activity: Object
});
const form = useForm({
    user_id: props.activity.users
});
</script>

Child component

<template>
    <Listbox v-model="selected" name="people">
        <ListboxLabel class="block text-sm font-medium leading-5 text-gray-700"> Assigned to </ListboxLabel>

        <div class="relative">
            <span class="inline-block w-full rounded-md shadow-sm">
                <ListboxButton
                    class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                    <span class="block flex flex-wrap gap-2">
                        <span v-if="selected.length === 0" class="p-0.5">Empty</span>
                        <span v-for="option in selected" :key="option.id" class="flex items-center gap-1 rounded bg-blue-50 px-2 py-0.5">
                            <span>{{ option.name }}</span>
                            <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" @click="removePerson(option)">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </span>
                    </span>
                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
                            <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </span>
                </ListboxButton>
            </span>

            <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
                <ListboxOptions class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
                    <ListboxOption v-for="option in options" :key="option.id" :value="option" as="template" v-slot="{ active, selected }">
                        <li class="relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none" :class="active ? 'bg-indigo-600 text-white' : 'text-gray-900'">
                            <span class="block truncate" :class="{ 'font-semibold': selected, 'font-normal': !selected }">
                                {{ option.name }}
                            </span>
                            <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4" :class="{ 'text-white': active, 'text-indigo-600': !active }">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path
                                        fillRule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clipRule="evenodd" />
                                </svg>
                            </span>
                        </li>
                    </ListboxOption>
                </ListboxOptions>
            </div>
        </div>
    </Listbox>
</template>

<script setup>
import { ref } from 'vue';
import { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
import {computed} from "vue";

const props = defineProps({
    options: Array,
    modelValue: Array
});

//
const emit = defineEmits(['update:modelValue'])

const selectedOption = ref(props.modelValue);

const selected = computed({
    get: () => selectedOption.value,
    set: v => {
        selectedOption.value = v;
        emit('update:modelValue', v.id)
    }
});
//

function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}


function removePerson() {
    e.stopPropagation();
    e.preventDefault();
    selectedOption.value = selectedOption.value.filter(p => p !== option);
}
</script>

I want the options in the props.activity.user selected by default in the child component. The values gets passed but when I deselect an option it gets added instead. And non-default values gets deselected

e.g.

The user Emi Webb gets added instead of deselected 'cause it's a default value

I'm stick trying to get this to work