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.

[muzi131313]

I write a mixin to solve this problem，mixin code:

export default {
  model: {
    prop: 'value',
    event: 'changeValue',
  },
  watch: {
    open(value) {
      this.$emit('update:modelValue', value);
      this.$emit('changeValue', value);
    },
    // for vue2
    '$attrs.value'(val) {
      this.open = val;
      this.watchOpen && this.watchOpen(val);
    },
    // for vue3
    '$attrs.modelValue'(val) {
      this.open = val;
      this.watchOpen && this.watchOpen(val);
    },
  },
  data() {
    return {
      open: this.$attrs.modelValue || this.$attrs.value,
    };
  },
};

[jens-morten-mikkelsen]

I changed it to just use sync'd props