Edit in JSFiddle

var vm = new Vue({
	el: '#app',
  data: {
  	users: [
    	{'name':'Nguyễn Văn A', 'email':'a.nguyenvan@allaravel.com', 'address':'Hà Nội'},
      {'name':'Nguyễn Văn B', 'email':'b.nguyenvan@allaravel.com', 'address':'Hồ Chí Minh'},
      {'name':'Nguyễn Văn C', 'email':'c.nguyenvan@allaravel.com', 'address':'Đà Nẵng'},
      {'name':'Nguyễn Văn D', 'email':'d.nguyenvan@allaravel.com', 'address':'Hải Phòng'},
      {'name':'Nguyễn Văn E', 'email':'e.nguyenvan@allaravel.com', 'address':'Thanh Hóa'},
      ],
    user: {}
  },
  methods: {
  	createUser () {
    	this.users.push(this.user)
      this.user = {}
    },
    updateUser (index) {
    	this.user = this.users[index]
      $("#updateUserModal").modal('show')
    },
    deleteUser (index) {
    	this.users.splice(index,1)
    } 
  }
});
<div id="app">
  <div class="container-fluid">
    <h3>QUẢN LÝ NGƯỜI DÙNG ALLARAVEL.COM</h3>
    <div class="row">
      <div class="col-md-12">
         <button type="button" class="btn btn-success" data-toggle="modal" data-target="#createUserModal">
          <span class="glyphicon glyphicon-plus"></span> Thêm người dùng
        </button>
      </div>
    </div>
    <!-- createUserModal -->
    <div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">THÊM NGƯỜI DÙNG</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Họ và tên</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="user.name" placeholder="Họ và tên">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" v-model="user.email" placeholder="Địa chỉ email">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Địa chỉ</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="user.address" placeholder="Địa chỉ">
                </div>
              </div>
            </div>  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Hủy bỏ</button>
            <button type="button" class="btn btn-success" @click="createUser()">Thêm user</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /createUserModal -->
    <!-- updateUserModal -->
    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">CHỈNH SỬA THÔNG TIN NGƯỜI DÙNG</h4>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="form-group">
                Điều chỉnh thông tin trên các textbox là cập nhật trực tiếp luôn vào local store, không cần có thêm nút cập nhật.
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Họ và tên</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="user.name" placeholder="Họ và tên">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" v-model="user.email" placeholder="Địa chỉ email">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="form-group">
                <label class="col-sm-2 control-label">Địa chỉ</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" v-model="user.address" placeholder="Địa chỉ">
                </div>
              </div>
            </div>  
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /updateUserModal -->
    <table class="table table-hover">
      <thead>
        <tr>
          <th>STT</th>
          <th>Họ và tên</th>
          <th>Email</th>
          <th>Địa chỉ</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user,index) in users">
          <td v-text="index + 1"></td>
          <td v-text="user.name"></td>
          <td v-text="user.email"></td>
          <td v-text="user.address"></td>
          <td>
            <button class="btn btn-primary" @click="updateUser(index)">
              <span class="glyphicon glyphicon-pencil"></span> Chỉnh sửa
            </button>
            <button class="btn btn-danger" @click="deleteUser(index)">
              <span class="glyphicon glyphicon-remove"></span> Xóa
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>