Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Blacking's avatar

Prop change not being caught in child component

(Just posted the question but am editing to put the code markups here)

Good morning everyone!

I'm kind of new to Vue and I'm having a weird behavior in my application that is using Vue 3 + Laravel 11.

It's an application similar to Trello (with task cards divided by columns).

I want to pass the ID of the clicked card all the way down to the Checklist.vue component being that the scope of the views is Kanban.vue > CardModal.vue > Checklist.vue (Kanban.vue invokes CardModal.vue and there's an invokation of the Checklist.vue component within Checklist.vue).

On the click event, I'm altering the value of the clickedCard const to the ID of the card and passing it down to the modal:

<CardModal
        :cardData="cardData"
        :clickedCard="clickedCard"
/>

In CardModal.vue I define clickedCard as a prop and verify its change through

    const props = defineProps({
        cardData: Object,
        showCardModal: Boolean,
        clickedCard: Object,
    });

    watch(() => props.clickedCard, (card) => {
            console.log('the ID has changed');
            cardClick.value = card;
    });

Which effectively does the console log and changes the value of a new const named cardClick. I have defined cardClick as a new variable to be able to send it down to Checklist.vue which I do through

                            <Checklist
                                v-if="cardData?.checklists.length"
                                v-for="checklist in cardData.checklists"
                                :cardClick="cardClick"
                            />

Within Checklist.vue I do the same process of defining cardClick as a prop and watching its change in state but this watch function does not capture its change for some reason

    const props = defineProps({
        checklist: Object,
        cardClick: Number,
    });

    watch(() => props.cardClick, () => {
        console.log("New card click");
    });

Any idea why I'm unable to catch the change in the prop's value?

Thank you in advance

0 likes
1 reply
gych's avatar

You've set the type for Cardclick in the Checklist.vue as Number

  cardClick: Number,

But it looks like the prop is supposed to be an Object ? Because in this watch you are setting card as value for cardClick which is an Object

    watch(() => props.clickedCard, (card) => {
            console.log('the ID has changed');
            cardClick.value = card;
    });

Try to set the id of the card as value for cardClick or change the type in Checklist.vue to Object.

Please or to participate in this conversation.