На стороне сервера рендеринг одного файлового компонента без vuex или маршрутизатора

Question

Мы используем Vue2 на веб-сайте, а не SPA, поэтому мы используем отдельные файловые компоненты пунктуально, чтобы улучшить взаимодействие с пользователем.

Ssr работает с этим кодом в entry_server.js, мы можем вызвать этот файл, например, из командной строки node ssr-bundle.js или из экспресс-приложения:

// entry_server.js
import Test from 'components/Test.vue';

const app = new Vue({
  render: h => (Test, {
    props: {}
  })
});

export default function(context) {
  return new Promise((resolve, reject) => {
    resolve(app);
  });
};

Это пример компонента:

// Test.vue
<template>
  <div>
    {{apidata}}
  </div>
</template>
<script>
import axios from 'axios';

export default {
  data() {
    return {
      apidata: []
    };
  },
  beforeCreate() {
    axios.get('/api/v1/versions.json', {params: {card_id: 274}}).then(response => {
      this.apidata = response;

      console.log('loadData!!!');
      console.log(response);
    });
  },
};
</script>

Когда нам нужно получить данные из API, компонент отрисовывается нормально, но он не показывает эти данные, рендеринг не ждет запроса API.

Мы нашли много примеров SSR и документов, использующих для этого vuex и router, но как сделать SSR с одним файловым компонентом для предварительной выборки данных из API и без vuex или router?