Vee-validate not updating the BootstrapVue Switch Checkbox state

Question

I'm using vee-validate on a BootstrapVue Switch Checkbox with yup schema like this.

<Form :validation-schema="schema" :initial-values="initialValues" ref="adminForm">
  <Field name="isOn" type="checkbox" v-slot="{ field }" :value="true" :unchecked-    value="false">
    <b-form-checkbox v-bind="field" v-model="field.checked" switch> Is Active</b-form-checkbox>
  </Field>
  
  <Button type="submit" :loading="loading" :disabled="!canValidate">Save</Button>
</Form>

In the script, const adminForm = ref(null);

const initialValues = ref({
  isOn: props.data?.isOn || false,
});

const schema = yup.object({
  isActive: yup.boolean().required(),
});

const canValidate = computed(() => {
  const { dirty, valid } = adminForm.value?.getMeta?.() || {};
  return dirty && valid;
});

The field slot prop but the checked key in it is preventing the switch checkbox from toggling as it's always true and not being updated by v-model.

I also tried changing the checked key in field slot prop by adding @change on switch checkbox but it's also not working. Another solution I tried was adding v-model="initialValues.isOn" on but its not working as well.

It'd be great if someone could guide me to a correct solution to this issue if it's not new. Thanks.