Как в Vue-приложении сначала загрузить данные в $store, а уже потом рендерить шаблоны?
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // вызывается до подтверждения пути, соответствующего этому компоненту.
    // НЕ ИМЕЕТ доступа к контексту экземпляра компонента `this`,
    // так как к моменту вызова экземпляр ещё не создан!
  },
  beforeRouteUpdate (to, from, next) {
    // вызывается когда маршрут, что рендерит этот компонент изменился,
    // но этот компонент будет повторно использован в новом маршруте.
    // Например, для маршрута с динамическими параметрами `/foo/:id`, когда мы
    // перемещаемся между `/foo/1` и `/foo/2`, экземпляр того же компонента `Foo`
    // будет использован повторно, и этот хук будет вызван когда это случится.
    // Также имеется доступ в `this` к экземпляру компонента.
  },
  beforeRouteLeave (to, from, next) {
    // вызывается перед переходом от пути, соответствующего текущему компоненту;
    // имеет доступ к контексту экземпляра компонента `this`.
  }
}

beforeRouteEnter (to, from, next) {
  next(vm => {
    // экземпляр компонента доступен как `vm`
  })
}

Источник
Покопался с роутером, как советовал Игорь , и решил задачу через глобальный хук beforeEach. Получилось кратко, красиво, и в одном месте. 
router/index.js
import store from '@/store'
import axios from 'axios'
...
router.beforeEach((to, from, next) => {
  if (!store.state.Data) {
    axios.post('https://site.ru/get_data').then(response => {
        store.dispatch('setData', response.data.Data)
        next()
  } else {
    next()
  }
})

Теперь переход на страницу выполняется только в случае, если данные загружены, а если не загружены - предварительно загружаются. Можно забыть про проверку наличия данных в компонентах.