Prop default gets overwritten in all mount-instances as soon as prop is passed once

I have a my-component.vue which sets a prop default to true:

const props = defineProps({
    modelValue: String,
    editable: {
        type: Boolean,
        default: true

I’d assume now that whenever the component is imported and mounted, its editable prop is set to true if no no other value is passed as prop but as soon as I pass:

<my-component :editable="false"/>

in any of the parent components, the editable prop inside my-component is permanently set to false in all instances of mounting it.

Is that the desired behaviour of default props or am I doing something wrong?

>Solution :

You probably have a bug somewhere, the default prop shouldn’t be overwritten by setting a prop value in a sibling.

As you can see in this example the default value is applied even though one of the siblings has :editable="false"

Leave a Reply