Как правильно передать данные с сервера в SPA, не прибегая к реализации API?
let appFrontData = '<?=$someServerVarHere ?>';
Гы! А вы думали что в идеальном варианте должны быть единорожки вместо этого?) Три варианта у вас есть и не более. 

1) Глобальная переменная. Кстати если вы посмотрите реализацию Nuxt.js/Next.js фреймворков, там как раз используется этот как единственный возможный.
2) Передача в компонент через props
<ComponentName :data='<?=$someServerVarHere ?>'/>
3) Загрузка из компонена

Других вариантов не существует
"Правильного" ответа тут не будет. Многое зависит от вашего конкретного случая, от того как построен Бекенд. 
Второй вариант выглядит предпочтительнее, если говорить про концепцию SPA. Один из плюсов такой архитектуры в том, что логика работы и данные разделены. То есть всю реализацию (html/css/js) можно один раз отдать на клиент и кэшировать там на максимально длинный срок. И подгружать только недостающие данные для отображения. (И axios вам вероятно даже не нужен).
С другой стороны, если речь идёт про какой-то сравнительно небольшой элемент который может и не понадобится пользователю, тогда, скорее всего это будет излишне. 

Вот вам совет: вынесите логику загрузки данных в отдельный модуль. Спрячьте за условной функцией loadData(). Чтобы вы в любой момент могли изменить способ загрузки. Это может быть как сетевой запрос
function loadData() {
  return fetch(' ... ')
}
Или заранее вставленные данные
function loadData() {
  return document.querySelector('#json-data').textContent
}