Why is vue js props data not updating?

Question

Vue.js

The data is received by ajax request when the button is clicked.
//Button

<button id="show-modal"
    class="P2CL3TInfo"
     v-bind:name="selecId = item.id"
    @click="open()">
</button>

 <modal v-if="showModal" @close="showModal = false"
    :country="mod[0].country"
    :city="mod[0].city"
    :dt="mod[0].created" >
</modal>

//Компонент
Vue.component('modal', {
    props: ['country', 'city', 'vendor', 'dt'],
    data: function () {
      return {
      }
    },
    delimiters: ['${', '}'],
    template: '#modal-template',
//Ajax запрос
            open: function(){
                      axios.get("{% url 'url' %}",{
                          headers: {
                              'X-Requested-With': 'XMLHttpRequest'
                          },
                          params: {
                              id: this.selecId
                          }}).then((response) => {
                              this.$data.mod =  response.data
                              this.showModal = true
                          }).catch(function (error) {
                                  this.selected = error;
                              });
                  },

Why is the data not updated when the window is shown?

Answer 1

Because this does not pass into the axios object, initialize the variable to be a reference to this.

Answer 2

this.$data.mod = response.data- so it is not necessary About set and $set