Each time the table is altered (even if not filtered), the filteredItems is updated (i.e. a new slice is created, creating a new table reference).

One would need to do a deep (or possibly a shallow) comparison of the previous contents of filteredItems vs the new Contents of finteredItems. There is a utility method in BootstrapVue that can do this type of comparison (it is used for comparing form-select, form-radios, form-checkboxes.

It could be used here as well.

Ok, thanks for the explanation :)
But how would that comparison be possbile when Vue is only keeping a reference of the filteredItems array like stated in the Vue API documentation of the watch method?

During the process that computes the items (which could be driven by a provider), the filter process runs, and a new reference to a filtered array is created and stored in this.filteredItems (basically via Array.slice(...)). This creates a new array (rather than updating the contents of the array).

So even if the filtered items remain the same (say after a local pagination). which means that with your suggested code change, the filtered event would fire every single time the table is paginated or sorted, basically emitting false filtered triggers.

A shallow/deep comparison of newVal and oldVal is required (i.e. the looseEquals comparison).

import looseEquals from ../utils
let a = [1, 2, 3, 4]
let b = [1, 2, 3, 4]
a === b //  = false, because a and b are different array references
looseEquals(a, b) // = true, because "contents" of a and b are the same