watch is not detecting change when array is spliced , but watcher runs when the array is being populated

Question

@click="filter.organization.splice(index, 1)"   

watch is ot detectng splice but works when the array is being populated

watch(
      () => filter.organization,
      (filter) => {
        console.log(filter, 'filter');
      }
    );

Answer 1

The syntax you've used to create your watcher is specifically used to detect when filter.organization is replaced, not when modified. See the Vue documentation for more information.

To fire the watcher for every modification:

watch(filter, (newfilter, oldfilter) => {
  console.log(newfilter);
});

or modify your current watcher to include the deep option

watch(
  () => filter.organization,
  (filter) => {
    console.log(filter, "filter");
  },
  { deep: true }
);