Vue JS watch not working

Hello,

I've imported a class 'Hex' and I tried to watch its propery named 'value'. The watcher is not working.

// Hex.js

export default class Hex {
    constructor () {
        this.value = '';
    }
}

// app.js
import Hex from './Hex';

new Vue({
    el: '#app',
    data: {
        // hex has a property called 'value'
        hex: new Hex,
    },

    watch: {
     'hex.value'() {
            alert('This is not triggered');
        }
    }   
});

But when I change hex:new Hex to hex: {value: ''}, the watcher is working.

What could be the problem?

Thanks.

jaydeluca

8 years ago

Level 8

I've never seen vue written like that, so I could be off here, but I think it could stem from the quotations around your variable, so maybe try changing it to:

watch: {
  hex.value(val) {
    alert('This is not triggered');
  }
}

Might be useful to take another look at the docs regarding watchers: https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

ahishamali

5 years ago

Level 12

you can use the deep watch

watch:{
   hex:{
      deep: true,
      handle(val){
          alert('.....')
      }
   }
}

1 like

Shafqat_ali

5 years ago

Level 5

I agree to @ahishamali answer, I have almost similar problem and deep watch helped me.

Please or to participate in this conversation.