Vue Component with Twitter Bootstrap styles for custom Mottie/Keyboard (Virtual Keyboard) input or textarea

KeyboardInput.vue

<template>
  <input
      :type="type"
      :placeholder="placeholder"
      :name="name"
      class="form-control"
      autocomplete="off"
      v-model="value"
  >
</template>

<script>
  /**
   * Bootstrap ready component for custom Mottie/Keyboard input.
   * 
   * Make sure to include jQuery and Mottie/Keyboard js and css files in your build.
   * Keyboard will be attached to the bottom of the screen but feel free to style it to your needs.
   * It's advisable to move keyboard settings to config file and import them into the component:
   *
   * ...
   * 
   * $(this.$el).keyboard(Object.assign({
   *   change: (e, keyboard, el) => {
   *     this.change(el.value);
   *   }
   * }, settings.keyboard));
   *
   * ...
   *
   * Works with Vee Validate and supports v-model!
   *
   * <keyboard-input
   *     type="email"
   *     placeholder="Email"
   *     name="email"
   *     v-model="form.email"
   *     v-validate="'required|email'"
   * ></keyboard-input>
   * 
   */
  export default {
    props: ['type', 'placeholder', 'name'],

    data: () => ({
      value: null
    }),

    mounted() {
      $(this.$el).keyboard({
        usePreview: false,
        change: (e, keyboard, el) => {
          this.change(el.value);
        }
        css: {
          input: 'form-control',
          container: 'center-block well',
          buttonDefault: 'btn btn-default',
          buttonHover: 'btn-primary',
          buttonAction: 'btn-secondary',
          buttonDisabled: 'disabled'
        },
      });
    },

    methods: {
      change(newValue) {
        this.value = newValue;
        this.$emit('input', this.value);
      }
    }
  };
</script>

<style>
  .ui-keyboard {
    border-radius: 0;
    left: 0;
    top: auto;
    bottom: 0;
    position: fixed;
    width: 100%;
  }
</style>