Edit in JSFiddle

new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  }
});
<div class="container" id="app">
  <div class="row">
    <div class="col-md-12">
      <h1>Họ tên đầy đủ: {{ ((firstName.toUpperCase().indexOf('VĂN') != -1) ? 'ÔNG' : ((firstName.toUpperCase().indexOf('THỊ') != -1) ? 'BÀ' : 'ÔNG / BÀ')) + ' ' + firstName.toUpperCase() + ' ' + lastName.toUpperCase() }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <label>First name</label>
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control" v-model="firstName">
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <label>Last name</label>
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control" v-model="lastName">
    </div>
  </div>
</div>