How to properly transfer data from the server to the SPA without resorting to the implementation of the API?

Question

Backend

It was decided to rewrite part of the existing service as with vuejs for greater flexibility + at the same time get rid of jQuery noodles. But the pages will not be entirely SPA, only part will be used as the root element.
In this regard, the question is - how to correctly display the already existing data for vue?
1. As before - with a template engine just in the markup / attributes? It's like that now, but I'd like to get rid of it. Always rejected these 2 style constructs. Do not load data for the root element, have a separate API url that will give the same data in JSON and load axios when initializing vue. Looks good, but you'll have to duplicate some of the functionality to implement the mini-API endpoints of the parts for multiple pages. 3. ...More options?
let appFrontData = '<?=$someServerVarHere ?>';

Answer 1

let appFrontData = '<?=$someServerVarHere ?>';

Gee! Did you think that ideally there should be unicorns instead?) You have three options and no more.
1) Global variable. By the way, if you look at the implementation of the Nuxt.js/Next.js frameworks, it just uses this one as the only possible one.
2) Passing to the component via props 3) Loading from the component There are no other options
<ComponentName :data='<?=$someServerVarHere ?>'/>