Edit in JSFiddle

var vm = new Vue({
    el: "#app",
    components: {
        "vue-touch-keyboard": VueTouchKeyboard.component
    },
		
    data: {
      visible: false,
      layout: "normal",
      input: null,
      options: {
        useKbEvents: false
      },
      // custom keyboard layouts
      layouts: {
        "tenkey": {
          _meta: {
            "backspace": { func: "backspace", classes: "control nobackground"},
            "accept": { func: "accept", text: "Enter", classes: "control featured"},
            "next": { func: "next", text: "Tab", classes: "control featured"}
          },

          default: [
            "{next} / * {backspace}",
            "1 2 3 -",
            "4 5 6 +",
            "7 8 9 =",
            "0 00 . {accept}"
          ]
        }
      },
      
      value: null
    },

    methods: {
        accept(text) {
          console.log("Input text: " + text);
          this.change(text);

          this.hide();
        },
        change(text) {
          // Trigger native 'input' event to notify Vue that the value has changed
          var evt = document.createEvent('HTMLEvents');
          evt.initEvent('input', true, true);
          this.input.dispatchEvent(evt);
        },

        show(e) {
          this.input = e.target;
          //this.layout = e.target.dataset.layout;
          this.layout = this.layouts[e.target.dataset.layout] || e.target.dataset.layout;

          if (!this.visible)
            this.visible = true
        },

        hide() {
          this.visible = false;
        },
				
				next() {
					let inputs = document.querySelectorAll("input");
					let found = false;
					[].forEach.call(inputs, (item, i) => {
						//if (!found && item == this.input && i < inputs.length - 1) {
						if (!found && item == this.input) {
              if (++i >= inputs.length) i = 0;
							found = true;
							this.$nextTick(() => {
								//inputs[i+1].focus();
								inputs[i].focus();
							});
						}
					});
					if (!found) {
						this.input.blur();
						this.hide();
					}
				}				
    }		
});

<h1 class="text-center">Demo of vue-touch-keyboard</h1>
<div class="container" id="app">
<!--
  <fieldset>
    <legend>Normal layout</legend>
    <input type="text" placeholder="Text input" @focus="show" data-layout="normal" v-model="value" />
  </fieldset>

  <fieldset>
    <legend>Compact layout</legend>
    <input type="text" placeholder="Text input" @focus="show" data-layout="compact" v-model="value" />
  </fieldset>
-->
  <fieldset>
    <legend>Numeric layout</legend>
    <input type="text" placeholder="Text input" @focus="show" data-layout="numeric" v-model="value" />
  </fieldset>

  <fieldset>
    <legend>Custom layout(Populer Tenkey)</legend>
    <input type="text" placeholder="Text input" @focus="show" data-layout="tenkey" v-model="value" />
  </fieldset>

  <vue-touch-keyboard id="keyboard" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" :change="change" />

</div>

html {
	font-family: Tahoma;
	font-size: 16px;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #333;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1 {
	text-align: center;
	font-size: 36px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 500;
}

.panel-body {
	padding: 15px;
}		

#keyboard {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 1000;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;

	padding: 1em;

	background-color: #EEE;
	box-shadow: 0px -3px 10px rgba(black, 0.3);

	border-radius: 10px;
}

fieldset {
	display: block;
	width: 300px;
	padding: 15px;
	margin: 15px auto;
	border-style: solid;
	background-color: #fff;
	border-color: #ddd;
	border-width: 1px;
	border-radius: 4px;	
}

input {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;		

	&:focus {
		border-color: #66afe9;
		outline: 0;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);			
	}
}

.vue-touch-keyboard .keyboard .key.backspace.nobackground {
  background-image: none;
  &:after {
    content: "BS";
  }
}