Accessing vuetify v-text-field value for another text field

I want to make a username suggestion based on users first and last name. The idea is after user finished first name and last name field, the username field value will be first + last name.

firstName = Bobby
lastName = Brown
username = BobbyBrown
<v-text-field
    v-model="firstName"
    label="First Name"
></v-text-field>

<v-text-field
    v-model="lastName"
    label="Last Name"
></v-text-field>

<v-text-field
    v-model="username"
    label="Username"
></v-text-field>

<script>
export default ({
  data() {
    return {
        firstName: '',
        lastName: '',
        username: '',
    }
  },
})
</script>

Answer

username should be declared as computed property with set/get methods:

<script>
export default ({
  data() {
    return {
        firstName: '',
        lastName: '',
       
    }
  },
computed:{
   username:{
      get(){ 
           return this.firstName+' '+this.lastName;
        },
      set(val){
          const [first,last]=val.split(' ');
          this.firstName=first;
          this.lastName=last;
        }

}
})
</script>