How to update the DOM inside a method before it completes?

Question

Vue.js

There was a problem with turning on the loader before further long calculations (long cycle, data loading, sleep, etc.).
There is a flag searchingthat is responsible for switching classes. The problem is that the classes are switched only after the execution of the search. I checked this by removing the third line, the loader turned on after receiving the data, at the time of their rendering from the docs.

methods: {
    search: function () {
        this.searching = true;
        this.docs = getData(); // Долгие вычисления
        this.searching = false; // (3)
    }
},

<div class="column__body" :class="[{loader: searching}, {loader_fade: searching}]">
    <doc-view v-for="doc in docs_on_opened_page" :doc="doc" :key="doc.id"></doc-view>
</div>

How to make Vue render the loader before the method completes? Or what other solutions are there?
UPD:
In the method getData, I "simulated" a long loading using a similar function:

function sleep(ms) {
    ms += new Date().getTime();
    while (new Date() < ms) {}
}

This one doesn't work either:

methods: {
    load: function () {
        this.searching= true;
        
        this.$nextTick(function () {
            root.docs = getData();
            root.searching= false;
        })
    }
},

I eventually solved my problem by simply replacing sleepwith setTimeout, although the question remained open.

Answer 1

methods: {
    search: function () {
        this.searching = true;
        Vue.nextTick(()=> {
              this.docs = getData(); 
              this.searching = false; 
        })
    }
},

Answer 2

Can be wrapped in Promise getData()

methods: {
    search: function () {
        this.searching = true;
        
        getData().then(function (res) => {
             this.docs = res;
             this.searching = false;
        });
    }
},