(Vue3) How to watch and modify array correctly

[Irisloverain]

Hello,
I have a question regarding array observation.
For context, when all options are selected, the 'checked' option should return to "All."
I'm using 'Watch' to track the selected option array, but it only works once.
It seems that the way I filter the selected options prevents the watch from tracking correctly.
Should I use a deep copy to modify the reactive array?
I apologize for the lengthy post, and thank you for your time in addressing this.

Kind regards,
Enya
https://github.com/vuejs/core/assets/56682095/db081eee-dee6-4380-bd6a-b392bebca6df

import { reactive, watch } from "vue";


let selectedFlow = reactive([])
const FlowButtonList = reactive([
    { label: "All", isActive: true },
    { label: "OFF", isActive: false },
    { label: "INIT", isActive: false },
    { label: "OPEN", isActive: false }
])


const handleFlow = (label, index) => {
    if (label === 'All') {
        selectedFlow = []
        resetSelection(FlowButtonList)
    } else {
        toggleSelection(FlowButtonList, index)
        handleFlowSelection(label)
    }
}
const toggleSelection = (list, index) => {
        list[0].isActive = false;
        list[index].isActive = !list[index].isActive
}
const resetSelection = (list) => {
    list.forEach((item, index) => {
        if (index !== 0) {
            item.isActive = false;
        } else {
            item.isActive = true;
        }
    });
}

const handleFlowSelection = (label) => {
    if (FlowButtonList[0].isActive) {
        selectedFlow = [];
    } else if (!selectedFlow.includes(label)) {
        selectedFlow.push(label);
    } else {
        selectedFlow = selectedFlow.filter(flow => flow !== label);
    }
}

watch(selectedFlow, (newValue, oldValue)=>{
    if(newValue.length === 3){
        console.log("Watch works")
        selectedFlow = []
        resetSelection(FlowButtonList)
    }
})
</script>
<template>
        <div class=" mt-3 querySection">
            <div class="mx-3 f-16">Flow</div>
            <div class="selectedList">
                <button v-for="(button, index) in FlowButtonList" :key="index"
                    :class="{ 'btn': true, 'btn-BT': true, 'active': (button.isActive), 'f-16': true }"
                    @click="handleFlow(button.label, index)">{{ button.label }}</button>
            </div>
        </div>
</template>```

[likui628]

watch(selectedFlow, (newValue, oldValue) => {
  if (newValue.length === 3) {
    console.log("Watch works")
    resetSelection(FlowButtonList)
  }
},
  {
    deep: true
  })

[Irisloverain]

Thank you so much for responding to my question!

[Irisloverain]

Splice works well so I guesse it need to be the deep copy.

import { reactive, watch } from "vue";

let selectedFlow = reactive([])
const FlowButtonList = reactive([
    { label: "All", isActive: true },
    { label: "OFF", isActive: false },
    { label: "INIT", isActive: false },
    { label: "OPEN", isActive: false }
])

const handleFlow = (label, index) => {
    if (label === 'All') {
        selectedFlow.splice(0)
        resetSelection(FlowButtonList)
    } else {
        toggleSelection(FlowButtonList, index)
        handleFlowSelection(label)
    }
}
const toggleSelection = (list, index) => {
    list[0].isActive = false;
    list[index].isActive = !list[index].isActive
}
const resetSelection = (list) => {
    list.forEach((item, index) => {
        if (index !== 0) {
            item.isActive = false;
        } else {
            item.isActive = true;
        }
    });
}

const handleFlowSelection = (label) => {
    if (FlowButtonList[0].isActive) {
        selectedFlow.splice(0)
    } else if (!selectedFlow.includes(label)) {
        selectedFlow.push(label);
    } else {
        const index = selectedFlow.indexOf(label);
        if (index !== -1) {
            selectedFlow.splice(index, 1);
        }
    }
    console.log("selectedFlow", selectedFlow)
}

watch(selectedFlow, (newValue, oldValue) => {
    if (newValue.length === 3) {
        selectedFlow.splice(0)
        console.log("Watch works", selectedFlow)
        resetSelection(FlowButtonList)
    }else if (newValue.length === 0){
        selectedFlow.splice(0)
        console.log("Watch works", selectedFlow)
        resetSelection(FlowButtonList)
    }
})
</script>
<template>
    <div class=" mt-3 querySection">
        <div class="mx-3 f-16">Flow</div>
        <div class="selectedList">
            <button v-for="(button, index) in FlowButtonList" :key="index"
                :class="{ 'btn': true, 'btn-BT': true, 'active': (button.isActive), 'f-16': true }"
                @click="handleFlow(button.label, index)">{{ button.label }}</button>
        </div>
    </div>
</template>