[Vuejs]-Getting data from a watched variable

Hi mago and welcome to SO.

In VueJS information is sent down to components with props and sent up to the parent with emit event. If you want the parent component to know when the interval is done, you should emit that event up.

Check out this example: https://codepen.io/bergur/pen/jjwZxO?editors=1010

In my alarm component the main thing is

mounted() {
    setInterval(() => {
        this.$emit('finished', this.wakeup.text)
        }, (this.wakeup.time) * 1000
      );
  },

Here I create the finished event that sends the wakeup text (note that I removed the extra data wrapper)

In my parent object I listen to that event

<Alarm @finished="logMessage" />

And all that logMessage does is this:

methods: {
    logMessage(msg) {
      console.log('the alarm has finished and sent this message: ', msg)
    }
  },

Note that setInterval emits the event multiple times.

i’m trying to figure it out since yesterday, for some reason, your code is not executing the mounted hook, i just duplicate your code (is missing a close bracket before watch, maybe just for the example code) and realise that if you change the mounted for other hook like created, this i’ll trigger and i’ll work, at least in my example.

created() {
this.readSettings();
setInterval(() => {this.timerCallback()}, (this.data.wakeup.time) * 1000);
}

Do you really need the mounted hook, or can you change to created?