Simple Input Binding using Vue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<div id="app">
  <label class="label is-capitalized">Description One </label>
  <div class="field">
    <div class="control is-expanded">
      <span class="counter">{{keyword.length}}</span>
      <input type="text" class="input size19" placeholder="description one" v-model="keyword">
    </div>
  </div>
</div>

CSS

.control {
  position: relative;
  width: 10.5em;
}
.counter {
  position: absolute;
  top: 0.1em;
  right: 0em;
  text-align: right;
  pointer-events: none;
}

JavaScript

var app1 = new Vue({
  el: '#app',
  data: {
    keyword: 'hello'
  }
});