How to set the initial data for the js framework (Vue.js) in the php backend?

Question

JavaScript

Let's say there is a page with a list of news. On the server side, the markup is rendered (including for Vue.js), then the script is connected, which already adds reactivity to everything, but what about the news directly?
Considered these options:

1. Receive by ajax after page load. Pros: fast and correct. Cons: pages will be empty for search engine bots.
   
2. Render js script with data initialization. So far it looks the best, but inline scripts on the page will confuse.
   
3. Render js on the server side. Pros: finished page at the exit. Cons: rendering through V8, which looks very difficult to figure out even with the installation.
   

Perhaps there is some way using the same vue to "collect" data from rendered components? Or maybe there are other approaches for setting the initial data?

Answer 1

I will be banal - you need SSR , that is, Node.js + Vue.js on the server side. PHP is redundant here.
If at all, you can return a static page to which the framework will be attached, and statically load data via JSONP directly inline. Yes, the first thing the framework will do is re-render the tree house for you. He can be "persuaded" not to do this - read the link above " client side hydration ".