Vue-js how to insert generated html component into index.html?

Question

Vue.js

The situation is this.
There is an application on Vue-JS
There is a cartographic component on Leaflet with event handling. Inside the handler, the server is contacted and data is received:

map.on('draw:created', function (e) {
...

   Vue.http.post('/dbdata', DataBody).then((response) => {
      userContent.rasters_list = response; // putting JSON answer to Component data in userContent
      console.log("Vue.rasters_list:");
      console.log(userContent.rasters_list);

I need to display the received data as a list.
The problem is that if the list is generated in index.html, then the data will not be there at startup. Those. I need to generate this list on event. If it is generated by an event, then it is obvious that you need to shove it in the handler above, something like:

<ul v-for="img in rasters_list">
                            {{img.id}}
                            <input type="checkbox" /> Layer 5 <br>
                          <ul>

Only here it is completely not clear how to make this garbage appear in the right place in index.html

How is this done? It is necessary that it be displayed as soon as the data came from the server.

Answer 1

Insert a component in the right place in the html, in which the display in the template is regulated in the spirit of
And the list itself is transferred to this component from the parent viaprops