How to monitor the state of a set on a page?

Question

Vue.js

Good day, I'm making a product filter block on the site, which represents a set of fields with different names and values. on average, there will be 3-5 filters per page. ran into the problem of tracking the state of all these elements as a whole. I tried to specify v-model="filter['name']" and hang the watcher on the filter, but this watcher only works when changing the keys of the array, but not the values. It does not react to changing values.
How is it easier to monitor the status of a set of filter fields for the subsequent updating of the product page?

Answer 1

I tried to specify v-model="filter['name']" and hang the watcher on the filter, but this watcher only works when changing the keys of the array, but not the values. It does not react to changing values.

Yes, changes to object properties are not tracked by default.
To do this, you need to specify deep: truein the watcher's settings:

watch: {
  filters: {
    deep: true,
    handler() {
      console.log(JSON.stringify(this.filters, null, 2));
    }
  }
}