v-model not working

[jens-morten-mikkelsen]

Hello, im having trouble using v-model to sync my props. im using vue2, vite and vue-demi. if i only have a v-model and check devtools, it sets $attrs.value, even if i have props: {modelValue: { type: Boolean}} If i have v-model:open i get a console error that says:

[Vue warn]: Missing required prop: "open"

found in

---> <HeaderMiniBasketSideDrawer> at src/components/header/mini-basket/HeaderMiniBasketSideDrawer.vue
       <HeaderMiniBasketActionLink> at src/components/header/HeaderMiniBasketActionLink.vue
         <Root>

and my components are like this: HeaderMiniBasketActionLinks:

<template>
    <div>
        <transition>
            <p v-if="isLoading && !data">
                Loading...
            </p>
            <button v-else-if="data"
                    class="group flex items-center text-link-dark text-14 font-bold cursor-pointer transition-color ease-in-out duration-300 hover:text-link-dark-hover"
                    @click="openSideDrawer">
                <span class="flex items-center justify-center mr-4 bg-link-dark h-20 min-w-20 px-8 pt-2 text-white rounded-full text-13 leading-none transition-bg ease-in-out duration-300 group-hover:bg-link-dark-hover">
                    {{ totalLineItems }}
                </span>
                <IconUiBasket class="w-20 h-auto mr-4"/>
                <span class="hidden self-end font-extrabold sm:inline-block">
                    {{ data.SubTotal }} {{ data.CurrencyCode }}
                </span>
            </button>
        </transition>
        <HeaderMiniBasketSideDrawer v-model:open="showSideDrawer"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue-demi";
import { useCurrentBasket, useCurrentBasketTotalLineItems } from "@/components/basket/useBasketApi";
import HeaderMiniBasketSideDrawer from "@/components/header/mini-basket/HeaderMiniBasketSideDrawer.vue";

export default defineComponent({
    name: "HeaderMiniBasketActionLink",
    components: { HeaderMiniBasketSideDrawer },
    setup() {
        const { isLoading, isError, data } = useCurrentBasket();

        const totalLineItems = useCurrentBasketTotalLineItems();
        
        const showSideDrawer = ref(false);
        function openSideDrawer() {
            showSideDrawer.value = true;
        }

        return {
            isLoading,
            isError,
            data,
            totalLineItems,
            showSideDrawer,
            openSideDrawer
        };
    }
});
</script>

HeaderMiniBasketSideDrawer:

<template>
    <SideDrawerOverlay v-if="open"
                       side="right"
                       bottom-content-class="bg-white-100"
                       header-content-class="w-full"
                       @close="closeSideDrawer">
        <template #headerComponent>
            <MiniBasketSideDrawerHeader/>
        </template>
        <template #mainContent>
            <p>
                hello world.
            </p>
        </template>
    </SideDrawerOverlay>
</template>

<script lang="ts">
import { defineComponent } from "vue-demi";
import SideDrawerOverlay from "@/components/shared/SideDrawerOverlay.vue";
import MiniBasketSideDrawerHeader from "@/components/header/mini-basket/MiniBasketSideDrawerHeader.vue";

export default defineComponent({
    name: "HeaderMiniBasketSideDrawer",
    components: { MiniBasketSideDrawerHeader, SideDrawerOverlay },
    props: {
        open: {
            type: Boolean,
            required: true
        }
    },
    emits: [
        "update:open"
    ],
    setup(props, { emit }) {
        function closeSideDrawer() {
            emit("update:open", false);
        }

        return {
            closeSideDrawer
        };
    }
});
</script>

The weirdest part is that it worked just 2 days ago.