How to check checkbox in vuetify when there is a data in the corresponding input when the edit button is click?

|This is the Form|

   <v-form ref="formzz">
              <v-row class="mt-3">
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="First Name" hint="Input your first name" :rules="inputRule"
                    v-model="dataItem.firstNameBor" :prepend-inner-icon="userIcon" required outlined                                            dense
                    color="warning">
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="Middle Initial" hint="Input your middle initial"
                    v-model="dataItem.middleNameBor" :prepend-inner-icon="userIcon" required outlined dense
                    color="warning" :rules="middleRule">
                  </v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field label="Last Name" hint="Input your last name" v-model="dataItem.lastNameBor"
                    :prepend-inner-icon="userIcon" required outlined dense color="warning" :rules="inputRule">
                  </v-text-field>
                </v-col>
                <v-col cols="8">
                  <v-select :items="divisionsData" label="Choose Division" outlined v-model="dataItem.divisionBor"
                    dense color="warning" :rules="selectRule">
                  </v-select>
                </v-col>
                <v-col cols="4">
                  <v-menu ref="borMenu" v-model="borMenu" :close-on-content-click="false"
                    transition="scale-transition" offset-y max-width="290px" min-width="auto">
                    <template v-slot:activator="{ on, attrs }">
                      <v-text-field v-model="dataItem.dateBor" label="Date Borrowed" required outlined
                        :append-icon="dateIcon" dense hint="format: yyyy-mm-dd" v-bind="attrs" v-on="on"
                        color="warning" :rules="dateRule">
                      </v-text-field>
                    </template>
                    <v-date-picker v-model="dataItem.dateBor" @input="borMenu = false" color="warning">
                    </v-date-picker>
                  </v-menu>
                </v-col>

                <v-col cols="12">
                  <h4 class="text-start">Equipment/s to borrow:
                    <span v-if="!showCheckboxErrorMsg" class="text-caption red--text">Please select at least one
                      checkbox.</span>

                  </h4>
                  <div class="d-flex flex-row justify-space-between">
                    <v-checkbox label="Projector" value="Projector" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Laptop" value="Laptop" v-model="dataItem.borEquipments" color="warning">
                    </v-checkbox>
                    <v-checkbox label="Microphone" value="Microphone" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Document Reader" value="Document Reader" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="White Screen" value="White Screen" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                    <v-checkbox label="Extension Cord" value="Extension Cord" v-model="dataItem.borEquipments"
                      color="warning">
                    </v-checkbox>
                  </div>
                </v-col>
                <v-col cols="12">
                  <div class="d-flex flex-row justify-space-between align-center">
                    <v-checkbox color="warning" label="Others: " class="mb-6" value="Others"
                      v-model="dataItem.OthersBox4" name="InstallationBox" :checked="isOthersBoxChecked" >
                    </v-checkbox>
                    <!-- <v-text-field class="ml-4" hint="Please specify others to check/repair"
                      v-model="dataItem.OthersInput4" required outlined :disabled="!dataItem.OthersBox4" dense
                      color="warning" :rules="checkInputRule4">
                    </v-text-field> -->
                    <v-text-field class="ml-4" hint="Please specify others to check/repair"
                      v-model="dataItem.OthersInput4" required outlined :disabled="!dataItem.OthersBox4" dense
                      color="warning" :rules="checkInputRule4">
                    </v-text-field>
                  </div>
                </v-col>

                <v-col cols="12">
                  <div class="d-flex flex-row justify-space-between">
                    <v-textarea class="ml-4" label="Purpose" hint="Please specify your purpose" required
                      v-model="dataItem.purposeBor" outlined color="warning" :rules="inputRule"></v-textarea>
                  </div>
                </v-col>
              </v-row>
            </v-form>

|This is the edit item method

    async editItem(item) {

    this.itemIndex = this.items.indexOf(item);
    console.log(this.itemIndex)
    if (this.itemIndex > -1) {

      let datas = Object.assign({}, item);
      this.dataItem = datas
      this.dataItem.firstNameBor = datas.firstname;
      this.dataItem.middleNameBor = datas.middleinitial;
      this.dataItem.lastNameBor = datas.lastname;
      this.dataItem.divisionBor = datas.division;
      this.dataItem.dateBor = datas.date;
      this.dataItem.purposeBor = datas.purpose;
      this.dataItem.borEquipments = datas.borrowed;
      //console.log(this.dataItem.borEquipments)
      this.dataItem.OthersInput4 = datas.others;
      //console.log(datas.others)

      if(this.dataItem.OthersBox4){
        this.dataItem.OthersInput4 = true;
      
      }

      this.itemId = datas.id;
      this.docRef = doc(borColRef, this.itemId);
      this.showDelete = true;
    }
    this.dialog = true;
       },

It should check the checkbox of dataItem.OthersInput4 if there is a data. the checkbox has a v-model of dataItem.OthersBox4. When the edit button is clicked, it does not check the checkbox when it has data. There is only value with the corresponding input but the checkbox is not checked.

How do I make it check the checkbox (dataItem.OthersBox4) when the input(dataItem.OthersInput4) has value or data?

Do following:

1. remove value="Others" from your v-checkbox
2. make it readonly
3. use the following computed value OthersBox4 in the v-model of your checkbox

Like this:

 computed: {
    OthersBox4() {
        return this.OthersInput4?.length > 0;
    }
  }

Here is the working playground
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { createApp } = Vue;
const { createVuetify } = Vuetify;

const App = { 
  data() { 
    return {
      OthersInput4: null
    }
  },
  computed: {
    OthersBox4() {
        return this.OthersInput4?.length > 0;
    }
  }
}

const vuetify = createVuetify();
const app = createApp(App);
app.use(vuetify);
app.mount('#app');

<!-- language: lang-css -->

#app { line-height: 3; }
[v-cloak] { display: none; }

<!-- language: lang-html -->

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet" />
<div id="app">
  <v-form ref="formzz">
      <v-row>
         <v-col>
            <v-checkbox v-model="OthersBox4" color="warning" label="Others: " class="mb-6"
             name="InstallationBox" readonly>
            </v-checkbox>
            <v-text-field class="ml-4" hint="Please specify others to check/repair"
              v-model="OthersInput4" required outlined  dense
              color="warning" :rules="checkInputRule4">
            </v-text-field>
        </v-col>     
      </v-row>
    </v-form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.4/dist/vuetify-labs.min.js"></script>

<!-- end snippet -->