Использование виртуальной клавиатуры для компонентов ввода для каждого Bootstrap модального

Question

Я создаю множество bootstrap модалов с помощью Vue. js. И мне нужно прикрепить виртуальную клавиатуру для каждого элемента ввода внутри этих модальных окон. Я пытаюсь извлечь пользу из кода, приведенного в [jsfiddle] [1]. Я успешно запустил этот код вместе со всеми необходимыми файлами css и js локально на моем компьютере. Я оставляю часть своего кода html как есть:

HTML:

        <div class="row">


     <div class="col" v-for="masa in masalar_data">

           <!-- The Masa Modal -->
          <div class="modal fade"  v-bind:id="'mod'+masa._id">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                  <h4 class="modal-title">[[masa.siparis_alan]] [[masa.siparis_grup]]-[[masa.siparis_masano]]</h4>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="p-2">Hesap Durumu : [[masa.hesap_durumu]]</div>
                    <div class="p-2">Not : [[masa.not]]</div>
                  </div>                      
                  <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-end align-items-stretch" v-for="siparis in masa.siparisler">
                      <div class="flex-grow-1">[[siparis.satir]]</div>
                      <span class="badge badge-primary badge-pill">[[siparis.adet]] [[siparis.birim]]</span>
                      <div>&nbsp;[[siparis.satir_toplam_fiyat]] TL </div>
                    </li>
                  </ul>
                  <div class="d-flex justify-content-between align-items-center">
                    <div class="p-1 bg-warning">Kişi Sayısı : [[masa.kisi_sayisi]]</div>
                    <div class="p-1 bg-warning">Toplam Fiyat : [[masa.masa_fiyat]] TL</div>
                  </div>
                </div>

                

                <!-- Modal footer -->
                <div class="modal-footer">

                            <form v-if="masa.hesap_durumu==='Hesap Açık'">

                    <div class="form-row">


                      <div class="form-group col-md-6">
                        <label for="inputEmail4">Nakit ödenen :</label>
                        <input type="text" class="form-control mb-1" v-model = "nakit_fiyat" placeholder="fiyat giriniz..">
                        <button type="button" class="btn btn-dark" v-on:click="hepsiNakit(masa.masa_fiyat)">Hepsi Nakit</button>
                      </div>
                      <div class="form-group col-md-6">
                        <label for="inputPassword4">Kart ile ödenen :</label>
                        <input type="text" class="form-control mb-1" v-model = "kart_fiyat" placeholder="fiyat giriniz..">
                        <button type="button" class="btn btn-dark" v-on:click="hepsiKart(masa.masa_fiyat)">Hepsi Kredi Kartı</button>
                      </div>

                    </div>
                            </form>

                   <button type="button" class="btn btn-info" v-if="masa.hesap_durumu==='Hesap Açık'" v-on:click="hesapGonder(masa._id,masa.hesap_durumu)">Hesap Gönder</button>                     
                  <button type="button" class="btn btn-primary" v-if="masa.hesap_durumu==='Hesap Açık'" v-on:click="hesapKapat(masa._id,masa.hesap_durumu)">Hesabı Kapat</button>                      
                  <button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="onCloseModal()">Kapat</button>
                </div>

              </div>
            </div>
          </div>

          <div class="card text-white mb-3" v-bind:class="getClass(masa.hesap_durumu)">
            <div class="card-body">
                <h6>[[masa.siparis_alan]]</h6>
              <h5 class="card-title">[[masa.siparis_grup]]-[[masa.siparis_masano]]</h5>
              <button type="button" class="btn btn-light" data-toggle="modal" v-bind:data-target="'#mod'+masa._id">Hesabı Aç</button>
            </div>
          </div>

      </div>

    </div>

И я добавил этот скрипт в свою программу: SCRIPT:

<script type="text/javascript">

  /* prevent keyboard from closing Bootstrap modal */
  $.keyboard.events.kbHidden = "keyboardHidden";

  $(document).on('shown.bs.modal', '.modal', function() {
    $('.modal input').keyboard({
        layout: 'qwerty',
        usePreview: false
      })
      // activate the typing extension
      .addTyping({
        showTyping: true,
        delay: 50
      });
  }).on('hide.bs.modal', '.modal', function() {
    // remove keyboards to free up memory
    $('.modal input').each(function() {
      $(this).data('keyboard').destroy();
    });
  });

До применения этого скрипта мои модальные окна работали без проблем. Но после этого они даже не появляются, и я не получаю ошибки в консоли chrome. [1]: https://jsfiddle.net/Mottie/egb3a1sk/2144/