VueJS - Skip watcher's first change

You could use the instance's $watch() method to start watching a data element at any point in your component. This way, the watcher wouldn't be instantiated right on the Vue instance's instantiation, as the Docs specify:

"The Vue instance will call $watch() for each entry in the [watch] object at instantiation."

So, you'd probably be looking for this:

data: {
  return() {
    data: null,
  };
},

mounted() {
  api.fetchList().then((response) => {
    this.data = response.dataFetched
    this.$watch('data', this.dataWatcher);
  });
},

methods: {
  dataWatcher() {
    // Code won't execute after this.data assignment at the api promise resolution
  },
}

In simple cases like this, Badgy's response is more direct, despite you could avoid the doneFetching variable. I'd use the $watch() if I needed more control: It actually returns an "unwatch" function you could call to delete it (Check it out).

Keep in mind also that watchers should be used for edge cases, and avoid mutating watched variables inside other watchers. This may harm Vue reactivity's "orthogonality" between data and methods if not used carefully.

You should simply declare a Boolean Variable which defines if your data fetching is done. By default you set it to false doneFetching: false and once your fetching Logic is done you call this.doneFetching = true.

After that all you have to do in your watcher is a clean and simply if(this.doneFetching){...} This simple logic should prevent your watcher logic to get triggered before you want it.

Badgy's response seems less intrusive and less prone to error.

The battle-proven method used in our project, particularly for tracking changes, looks like this:

export default {
  data: () => {
    dataLoaded: false,
    valueThatChanges: 'defaultValue',
  },
  mounted () {
    let self = this
    loadData().then((result) => {
      self.valueThatChanges = result
      self.$nextTick(() => { //with this we skip the first change
        self.dataLoaded = true
      })
    })
  },
  methods: {
    loadData() {
      //your implementation
      return result
    }
  },
  watch: {
    valueThatChanges: function(newValue, oldValue) {
      if (this.dataLoaded) {
        //send tracking change
        console.log('Value was changed from ' + oldValue + ' to ' + newValue + ' via interaction, not by loading')
      }
    }
  }
}