Vue JS calling methods inside beforeRouteEnter NProgress

I am trying to call an API before navigating to the route . The problem is that if I try to call axios call inside beforeRouteEnter it is working fine for example;

beforeRouteEnter(routeTo, routeFrom, next) {
                    NProgress.start()
                    axios.get('https://jsonplaceholder.typicode.com/posts')
                     .then(res => {
                         next(vm => {
                             vm.data = res.data
                         })
                         NProgress.done()
                    }) 
                },

But when I try to call an API from methods it's navigating to the route before resolving an API and also NProgress bar is also completing before resolving a call .

 beforeRouteEnter(routeTo, routeFrom, next) {
                NProgress.start()
                next(vm => {
                    vm.index()
                    NProgress.done()
                })
     },
     methods : {
          index() {
         			 axios.get('https://jsonplaceholder.typicode.com/posts')
                    .then(res => {
                        console.log(res.data)
                    .catch(error => {
                        console.log(error)
                    })
                },
        }

Can anyone guide me what maybe wrong ?