Why is nuxt loading not working correctly?

Question

Vue.js

Good afternoon! I'm trying to attach the loader to the project, following the documentation, but something doesn't grow together. Hooks like start() & finish() just don't work. Here is the loader code:

<template>
  <div class="preloader" v-if="loading">
    <svg
      width="20%"
      height="20%"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid"
      class="lds-ring"
    >
      <circle cx="50" cy="50" fill="none" r="30" stroke="#ffffff" stroke-width="10" />
      <circle
        cx="50"
        cy="50"
        fill="none"
        r="30"
        stroke="#0048aa"
        stroke-width="10"
        stroke-linecap="square"
        transform="rotate(133.997 50 50)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          calcMode="linear"
          values="0 50 50;180 50 50;720 50 50"
          keyTimes="0;0.5;1"
          dur="1.7s"
          begin="0s"
          repeatCount="indefinite"
        />
        <animate
          attributeName="stroke-dasharray"
          calcMode="linear"
          values="18.84955592153876 169.64600329384882;94.2477796076938 94.24777960769377;18.84955592153876 169.64600329384882"
          keyTimes="0;0.5;1"
          dur="1.7"
          begin="0s"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  </div>
</template>
<script>
export default {
  data: () => ({
    loading: false
  }),

  // mounted() {
  //   this.$nextTick(() => {
  //     this.$nuxt.$loading.start();

  //     setTimeout(() => this.$nuxt.$loading.finish(), 500);
  //   });
  // },

  methods: {
    start() {
      console.log("start");
      this.loading = true;
    },
    finish() {
      this.loading = false;
    }
  }
};
</script>

nuxt.confug: If you remove v-if - then the loader will spin forever, and with the condition it does not appear at all, because. loading is always false.
loading: "components/TheLoader.vue",