Как отобразить элемент в компоненте Vue только после NProgress.done()

Просматривая документацию NProgress, похоже, что она предоставляет «.status», который возвращает значение текущего загрузчика, но возвращает «ноль», когда загрузчик не «запущен».

<template>
  <div>
    <div v-show = "state.status == null">
      <p>
        Here are all the nice things with placeholders for the data from the
        API.
      </p>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

const state = Vue.observable(NProgress);

export default {
  data: () => ({ state }),
  mounted: function () {
    NProgress.start(); // Start the bar loading
    setTimeout(() => { // Perform your async workloads
      NProgress.done(); // .done() to finish the loading
    }, 5000);
  },
};
</script>

Вам нужно сделать NProgress реактивным, поэтому вы можете просто использовать Vue.observable(state).