Q:

Concat text in vue.js into form

I want to combine the texts that I created in vue into 1 text
ex:
text field 1  = Kode
text field 2 = Daerah
text field 3 = NomorKode
then I have 1 text field NomorUnik, which is the value of this text field is combination of Kode, Daerah, NomorKode. And everytime I do input or update the text field, NomorUnik is automatically edited too in realtime. How to do that?
CODE:
                    <v-col cols="12">
                        <v-text-field label="Kode*" v-model="form.Kode" required></v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="Daerah*" v-model="form.Daerah" required>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="NomorKode*" v-model="form.NomorKode" required>
                        </v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="KodeUnik*" v-model="form.KodeUnik" required>
                        </v-text-field>
                    </v-col>

this is a piece of code to send data into api
updateData() {
        this.listperkiraan.append('jenisperkiraan', this.form.JenisPerkiraan);
        this.listperkiraan.append('kodeunik', this.form.KodeUnik);
        this.listperkiraan.append('kode', this.form.Kode);
        this.listperkiraan.append('daerah', this.form.Daerah);
        this.listperkiraan.append('nomorkode', this.form.NomorKode);
        var uri = this.$apiUrl + 'listperkiraan/' + this.KodeUnik;
        .................
        ..........

    editHandler(item) {
        this.typeInput = 'edit';
        this.statusUpdate = false;
        this.dialog = true;
        this.form.Kode = item.Kode;
        this.form.Daerah = item.Daerah;
        this.form.NomorKode = item.NomorKode;
        this.form.KodeUnik = item.KodeUnik;
        this.updatedId = item.KodeUnik
    },

A:

Try this:

 new Vue({
    el:"#app",
    data: { 
        form: {
            Kode:'',
            Daerah:'',
            NomorKode:'',
            KodeUnik:''
        }    
    },
    methods: {
        updateText(){
            this.form.KodeUnik = this.form.Kode + ' ' + this.form.Daerah + ' ' + this.form.NomorKode;
        }
    }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <div id="app">
      <input type="text" v-model="form.Kode" @keyup="updateText" />   
      <input type="text" v-model="form.Daerah" @keyup="updateText"/>   
      <input type="text" v-model="form.NomorKode" @keyup="updateText"/>
      <br><br>
      KodeUnik: <input type="text" v-model="form.KodeUnik" />
    </div>        
</body>
</html>

