Why bootstrap 4 modal window closes when input field is changed in it?

Question

Bootstrap

Good day.
There is a modal window and in it an input connected via v-model input:

<div class="modal-body">
  <div class="form-group row" v-for="field in settings" :key="field.name">
    <label>{{ field.title }}</label>
    <div>
      <input type="text" class="form-control" v-model.lazy.number="field.value">
    </div>
  </div>
</div>

If for the first time (!) after opening the page you change the value in the input, then the modal window is hidden, while the "darkening" that occurs with the modal window remains.
Further, by clicking on the page, we remove the "blackout", then we open the window a second time and try to change something, in this case everything works correctly.

Answer 1

Good. Now the model window code to the studio.

Answer 2

Consists of 2 parts:
ModalSettings.vue

<template>
  <ModalTemplate :modalInfo="modalInfo" :settings="settings" @update="update"></ModalTemplate>
</template>

<script>
import { fields } from "./_settings.js"
import _ from "lodash"
import ModalTemplate from "~/components/Templates/Modals/ModalSettingsTemplate.vue"
import { mapState } from "vuex"

export default {
  data() {
    return {
      modalInfo: {
        name: "modalSettings", // должна быть соответствующая кнопка с data-target="#modalSettings"
        title: "Настройка раздела Входящие",
        text: ""
      },
      fields
    }
  },
  computed: {
    ...mapState({
      settings: function(state) {
        let res = _.map(this.fields, field => {
          field["value"] = state.iJobs[field.name]
          return field
        })
        return res
      }
    })
  },
  methods: {
    update: function(newValue) {
      _.forEach(newValue, field => {
        this.$store.commit(field.mutation, field.value)
      })
    }
  },
  components: {
    ModalTemplate
  }
}
</script>

ModalSettingsTemplate.vue

<template>
  <div class="modal fade" :id="modalInfo.name" tabindex="-1" role="dialog" :aria-labelledby="modalInfo.name" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ modalInfo.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" v-if="modalInfo.text !== ''">
          {{ modalInfo.text }}
        </div>
        <div class="modal-body">
          <div class="form-group row" v-for="field in settings" :key="field.name">
            <label class="col-sm-4 col-form-label">{{ field.title }}</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" v-model.lazy.number="field.value">
              <small class="form-text text-muted">{{ field.help }}</small>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
          <button type="button" class="btn btn-primary" @click="updateSettings">Сохранить</button>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  props: {
    modalInfo: Object,
    settings: Array
  },
  methods: {
    updateSettings: function() {
      this.$emit("update", this.settings)
      $("#" + this.modalInfo.name).modal("hide")
    }
  }
}
</script>