Как вызвать функцию запуска vue-progressbar из перехватчиков axios

Question

vue-progressbar не запускает функцию запуска и завершения при вызовах от axios interceptors , а также останавливает доступ axios к серверу.

всякий раз, когда я удаляю приложение. $ Progress.start () перехватчики axios работают отлично (то есть возвращают данные с сервера).

если я использую axios напрямую (не глобальный экземпляр из перехватчиков axios), я могу легко вызвать функции start () и finish и работает отлично.

То, что я хочу, - это глобальный экземпляр axios с индикатором выполнения.

спасибо за ваше время?

// это мой файл progressbar.js

import Vue from 'vue';
import VueProgressBar from 'vue-progressbar';
  const options = {
   color: '#201c11',
   failedColor: '#874b4b',
   thickness: '5px',
   transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
   },
 }
Vue.use(VueProgressBar, options)
export default  Vue;

// это мой api-axios.js

import axios from 'axios';
import app from './progressbar';

const instance = axios.create({
  baseURL: '/api'
});

instance.interceptors.request.use(config => {
  app.$Progress.start(); // for every request start the progress
  return config;
 });

instance.interceptors.response.use(response => {
   app.$Progress.finish(); // finish when a response is received
  return response;
});
export default instance; // export axios instance to be imported in your   app

// это мой файл app.js

import './bootstrap';
import Vue from 'vue'; // Importing Vue Library
import VueRouter from 'vue-router'; // importing Vue router library
import router from './routes';
import Axios from './api-axios';

window.Vue = Vue;
Vue.use(VueRouter);

Vue.prototype.$http = Axios;
const app = new Vue({
el: '#app',
router,
});

// это метод в компоненте, где инициируется серверный вызов

createTask()
        {                
            this.$http.post('/task', {
                name: this.task.name,
                description: this.task.description,
            })
                .then(response => {

                    this.reset();

                    this.tasks.push(response.data.task);

                    $("#add_task_model").modal("hide");

                })
                .catch(error => {
                    this.errors = [];
                    if (error.response.data.errors.name) {
                        this.errors.push(error.response.data.errors.name[0]);
                    }

                    if (error.response.data.errors.description) {
                        this.errors.push(error.response.data.errors.description[0]);
                    }
                });
        },