How to work with modal windows in vue.js?

Question

React

Hello, for example, there is a list of stores that I receive with an ajax request, then in the table, when you click on the details button, a modal window should appear with a description of the store and a Yandex or Google map where this store is located.
To get data for a specific store, I send an ajax request with the id of the selected store.
Question #1: Is it better to make modal windows a component?
Question number 1.1: How, in this case, to transfer the data that came to the window?
Question #2: How to get map data inside vue?

methods: {
  // Модальное акно
      open: function(){
          axios.get("{% url 'proxy:ajax_magazin' %}",{
              headers: {
                  'X-Requested-With': 'XMLHttpRequest'
              },
              params: {
                  id: this.selecId
              }}).then((response) => {
                      this.modals =  response.data
              }).catch(function (error) {
                      this.selected = error;
                  });
          ymaps.ready(function(){
              var map = new ymaps.Map("map", {
                  center: [this.lat, this.lon],
                  zoom: 7
              });
          });
          this.active = true
      },
      close: function(){
          this.active = false
      }
  }

Here is the data that comes

"modals": [
    {
      "country": "Bangladesh",
      "city": "Tangail",
      "lat": "24.25",
      "lon": "89.916672",
      "gmt": "6.0",
      "update": null,
      "created": "2017-08-07T07:37:01.109197Z",
      "online": null,
    }
  ],

How to get data like this.modals.lat?

ymaps.ready(function(){
                          var map = new ymaps.Map("map", {
                              center: [this.modals.lat, this.modals.lon],
                              zoom: 7
                          });
                      });

Answer 1

Swap the routes. The first one that comes up is used, not the one that you think is correct in your head.

Answer 2

1) It is better to make a component. And show through v-if.
2) As well as a unidirectional data flow, through props
3) Again, through props. If you use v-if then your component will be re-rendered each time it is called, that previous map data will be erased. To show the map, you can subscribe to the ymaps.ready event at the time of mounting and draw the map in the method.