Initializing VueJS App with spinner

Hello. I use webpack vuejs template. I want to grab some data and do some actions before my app starts. While doing this I want to display some kind of spinner.

So in the template the app is initialized this way:

  new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
  })

But before I do this there should be a loader and the app should not start. This is because I need to fetch some data from server, refresh token etc. And v-if is not an option, as well as hooks. Some people suggest using hooks, like beforeCreate and do all my necessary requests in the webhook, but it doesn't mean that beforeCreate will wait till requests are done. And if I refresh page, the router already started, and all components are working but I havent yet got necessary data.

So I'm not sure what's the best approach here.

I can try to just put some kind of <div id="loader"> next to <div id="#app">. Do some requests, and after they finish init application with new Vue which will somehow (with jquery?) delete #loader, but that's hacky

So what's the best approach of initializing app? Thanks in advance!