I have Vue.js app that fetch some complex data from API with Axios and then visualize this data.
My code looks similar to this:

```
{
  data: () => ({
    data: null,  // or Object, it doesn't matter now
    loading: false,
    errored: false,
    loadingMessage: ''
  }),
  methods: {
    loadData: function() {
      this.loading = true;
      this.loadingMessage = 'Fetching Data';
      axios.get('api/url/').then((response) => {
        this.data= response.data;  // or this.$set(this, 'data', response.data), it doesn't matter now
        this.loadingMessage = 'Process Data';
        this.processData();
      })
      .catch(function () {
        this.errored= true;
      })
      .then(function () {
        this.loading = false;
      })
    },
    processData: function() {
        // process data
    }
  }
}

```

So then I click on the button in template, this button calls `loadData()` function.
It works fine, but fetching data takes some time and processing also takes some time and Vue change template and variables only when axios request is finished. So I see only `Fetching Data` message but not `Process Data`.

How can I show the user at what stage of processing the data now?
Maybe I should call the `processData()` function in `watch methods`, but that seems overkill to me.

Update
------

I ended up with `setTimeout()` wrap. See my answer below.