My local variable is not being changed with watch in Vue.js + primevue

I have a parent component and a child component. I created a local variable in the child component to copy the parent’s variable and be able to change its value. The problem is that in some circumstances the local variable does not have its value changed to the value of the parent variable, even using watch.

// Child component:

<script setup>

const props = defineProps({
    document: Object,
    documentsSelected: Array,
    requestsSelected: Array,
    visibleAndSelectableRequests: Array,
    allRequestsSelected: Boolean
});

const emit = defineEmits([
    'toggleSelectAllRequests',
    'update:requestsSelected'
]);

const localRequestsSelected = ref([...props.requestsSelected]);

watch(props.requestsSelected, (newValue) => {
    localRequestsSelected.value = [...newValue];
}, {immediate: true});

const toggleRequestsSelection = (request) => {
    emit('update:requestsSelected', request);
}

const toggleSelectAllRequests = () => {
    emit('toggleSelectAllRequests');
}
</script>
<template>
    <Button
        v-if="visibleAndSelectableRequests.length !== 0"
        :label="allRequestsSelected ? 'Uncheck all' : 'Select all'"
        @click.stop="toggleSelectAllRequests"
    ></Button>

    <div v-for="request of document.requests">
        <Checkbox
            v-model="localRequestsSelected"
            :key="request.id"
            :value="request"
            @click.stop="toggleRequestsSelection(request)"
        />
    </div>
</template>

Parent component:

<script setup>
const requestSelected = ref([]);

const toggleRequests = (request) => {
    if (requestSelected.value.includes(request)) {
        requestSelected.value = requestSelected.value.filter(
            (el) => el !== request
        );
    } else {
        requestSelected.value = [...requestSelected.value, request];
    }
}

const toggleSelectAllRequests = () => {
    if (allRequestsSelected.value) {
        requestSelected.value = [];
    } else {
        requestSelected.value = [...visibleAndSelectableRequests.value];
    }

    allRequestsSelected.value = !allRequestsSelected.value;
}
</script>
<template>
    <CardDocument
        v-for="document of documents"
        :key="document.p01_sequencial"
        :document="document"
        :requestsSelected="requestsSelected"
        :visibleAndSelectableRequests="visibleAndSelectableRequests"
        :allRequestsSelected="allRequestsSelected"
        @toggleSelectAllRequests="toggleSelectAllRequests"
        @update:requestsSelected="toggleRequests"
    />
</template>

The strangest thing is that when I click directly on the Checkbox, the value of the parent variable and the child variable change correctly. However, when I click the select or deselect all button, the value of the parent variable changes, while localRequestsSelected is not updated. This prevents the Checkbox from changing. Can someone help me with this? Am I doing something wrong?

You need to sign in to view this answers

Related Post