how to stop loader once page is mounted in vue js

Question

please i want the loader to load before contents are displayed on the page and stop when the content has been displayed

this is my loader

     <div v-if="isLoading">
        <loader
          object="#ff9633"
          color1="#ffffff"
          color2="#17fd3d"
          size="5"
          speed="2"
          bg="#343a40"
          objectbg="#999793"
          opacity="80"
          name="circular"
        ></loader>

      </div>

this is my script tag

<script>
import { Carousel, Slide } from "vue-snap";
import "vue-snap/dist/vue-snap.css";
export default {
  name: "App",
  components: {
    Carousel,
    Slide
  },
  data() {
    return {
      isLoading: false
    };
  },
  mounted() {
    longAjaxRequest.then(res => {
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    });
  }
};
</script

like this the loader doesn't work until i set isLoading = true

please how can i achieve