JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<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>

JavaScript

new Vue({
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  }
});