Watch change in nested property in Vue 3

Question

I have created a Simple State Management with Reactivity API

My Store file looks like the following:

import { reactive, watch } from "vue";

const state = reactive({
   form : {
    service_id : null
   }
})

 watch('state.form.service_id', (newVal, oldVal) => {
     console.log('service changed');
 }, { deep: true });
 

export default {
  state, 
}

I am trying to watch the change in state.form.service_id, but I am getting the following error:

[Vue warn]: Invalid watch source: state.form.service_id A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types

If I replace the watch code with the following, then it works.

 watch('state.form', (newVal, oldVal) => {
     console.log('form changed');
 }, { deep: true });

But I need to watch for the change in state.form.service_id. Is there any solution?

Penny Liu · Accepted Answer · 2025-04-09 10:23:16Z

18

Try to use a getter function instead of the property path :

watch(
  () => state.form.service_id,
  (newVal, oldVal) => {
    console.log('service changed');
  },
  { deep: true }
);

edited Apr 9 at 10:23

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Feb 12, 2022 at 9:08

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Watch change in nested property in Vue 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related