Edit in JSFiddle

new Vue({
  el: '#app',
  data: {
    firstName: 'Nguyễn Văn',
    lastName: 'Tuấn'
  },
  methods: {
    fullName: function (type) {
      var title = '';
      var fullName = '';
      if (type == 1 ) {
        // Kiểu Việt Nam
        if (this.firstName.toUpperCase().indexOf('VĂN') != -1) {
          title = 'ÔNG';
        } else if (this.firstName.toUpperCase().indexOf('THỊ') != -1) {
          title = 'BÀ';
        } else {
          title = 'ÔNG/BÀ';
        }
        fullName = title + ' ' + this.firstName.toUpperCase() + ' ' + this.lastName.toUpperCase();
      } else if (type == 2) {
        // Kiểu Anh
        title = 'MR/MRS';
        fullName = title + ' ' + this.lastName.toUpperCase() + ' ' + this.firstName.toUpperCase();
      }
      return fullName;
    }
  }
});
<div class="container" id="app">
  <div class="row">
    <div class="col-md-12">
      <h1>Họ tên đầy đủ: {{ fullName(1) }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h1>Full name: {{ fullName(2) }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <label>Họ và đệm</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>Tên</label>
    </div>
    <div class="col-md-6">
      <input type="text" class="form-control" v-model="lastName">
    </div>
  </div>
</div>