Accessing previous value with watcher

[3zzy]

watch(() => ScopeStore.$state, (state, prevState) => {
    console.log('categoryId', state.categoryId, prevState.categoryId);
},{ deep: true })

logs categoryId 36 36 although the value is changed from 0 to 36 by a select @change:

@change="ScopeStore.categoryId = $event.target.value"

How do I access the previous state correctly?

Thanks!

[posva]

You need to clone the object if you want to watch an object and still get the previous state (https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watching-reactive-objects)

import _ from 'lodash';

watch(
  () => _.cloneDeep(ScopeStore.$state),
  (state, prevState) => {
    // ....
  }
);

Another solution is to watch the specific attribute(s) you want:

watch(() => ScopeStore.$state.categoryId, (id, prevId) => {
  // ...
})
// watching multiple sources
watch(() => [ScopeStore.$state.categoryId, ScopeStore.$state.other, ([id, other], [prevId, prevOther]) => {
  // ...
})