InertiaJS / useForm / Bool Values and checkboxes not registering

Hi All,

I've got two checkboxes on useForm that when writing to the table translate to 0/1 bit values. I understand this is the most efficient way to write bools to an SQL table.

My "Edit" form is the same as my "Create" form. When editing, it will populate the use form values. If you're creating a new report, the values are set to default.

My issue is, when I get the data back from the table, useForm doesn't recognize the value and set the checkboxes to their correct state unless I add this below the useForm.

form.qualityIncidentReport = form.qualityIncidentReport == 1 ? true : false; 
form.employeeAtFault = form.employeeAtFault == 1 ? true : false; 

The issue is that setting the values this way creates false positives for the the getChanges()/isDirty() methods.

When I use VueDev tools after loading a report to edit, the values show 0 or 1. If I check or uncheck they change to true/false as they're supposed to be. What's the most effective way to get the v-model to recognize that when the checkbox value is 1, it should be "checked" and vice versa. Trying to use best practices here but I haven't been able to find anything.

Below you'll see where if I receive NCR prop, it'll populate the useForm fields, if not, it sets the to null.

Create.vue

const form = props.ncr ? useForm(props.ncr) : useForm({
    
    status: null,
    type: null,
    severity: null,
    qualityIncidentReport: false,

    division: null,
    incidentDate: null,
    facilityQualityManager: null,
    facilityGeneralManager: null,
    jobNo: null,
    quantityNonConforming: null,
    equipment: null,
    equipmentDescription: null,
    assemblyPartNo: null,
    drawingProcedureNo: null,
    reportDescription: null,

    employeeInvolved: null,
    employeeSupervisor: null,
    departmentInvolved: null,
    employeeAtFault: false,
    generatingBusinessUnit: null,
    purchaseOrderNo: null,
    
    repairCost: null,
    costDescription: null,
    sixMRootCause : null,
    CAPA: null,
});

...

<input type="checkbox" title="qualityIncidentReport"  v-model="form.qualityIncidentReport" :checked="form.qualityIncidentReport"/>
                            

I thought maybe using the :checked v-bind would help but it doesn't.

Let me know if you need more informatoin.