Reset nested form object Inertia JS

I've got a form for creating or updating recipes on a meal planning app I'm working on:

<template>
	<form class="mt-2 p-2 rounded-lg bg-gray-100 shadow flex flex-col" @submit.prevent="submit">
		<div class="flex items-center">
			<jet-label for="name">Recipe Name</jet-label>
			<jet-input type="text" id="name" v-model="form.name" class="ml-2 rounded px-1 py-0 border-green-300 hover:outline-none hover:border-green-500 focus:outline-none border" required autofocus />
		</div>
		<jet-input-error :message="form.errors.name" class="mt-2" />
		<div class="mt-2 flex items-center">
			<jet-label for="location">Recipe Location</jet-label>
			<jet-input type="text" id="location" v-model="form.location" class="ml-2 rounded px-1 py-0 border-green-300 hover:outline-none hover:border-green-500 focus:outline-none border" required />
		</div>
		<jet-input-error :message="form.errors.location" class="mt-2" />
		<p class="mt-4">What meals can it be for?<br>Must choose at least one.</p>
		<div class="mt-2 flex">
			<jet-checkbox type="checkbox" id="breakfast" v-model="form.meals.breakfast" class="rounded" :checked="form.meals" />
			<jet-label class="pl-2" for="breakfast">Breakfast</jet-label>
		</div>
		<div class="mt-2 flex">
			<jet-checkbox type="checkbox" id="lunch" v-model="form.meals.lunch" class="rounded" :checked="form.meals" />
			<jet-label class="pl-2" for="lunch">Lunch</jet-label>
		</div>
		<div class="mt-2 flex">
			<jet-checkbox type="checkbox" id="dinner" v-model="form.meals.dinner" class="rounded" :checked="form.meals" />
			<jet-label class="pl-2" for="dinner">Dinner</jet-label>
		</div>
		<div class="mt-2 flex">
			<jet-checkbox type="checkbox" id="dessert" v-model="form.meals.dessert" class="rounded" :checked="form.meals" />
			<jet-label class="pl-2" for="dessert">Dessert</jet-label>
		</div>
		<div class="mt-2 flex">
			<jet-checkbox type="checkbox" id="snack" v-model="form.meals.snack" class="rounded" :checked="form.meals" />
			<jet-label class="pl-2" for="snack">Snack</jet-label>
		</div>
		<div v-if="form.errors['meals.breakfast'] || form.errors['meals.breakfast'] || form.errors['meals.breakfast'] || form.errors['meals.breakfast'] || form.errors['meals.breakfast']">
			<jet-input-error v-if="form.errors['meals.breakfast']" :message="form.errors['meals.breakfast']" class="mt-2" />
			<jet-input-error v-else-if="form.errors['meals.lunch']" :message="form.errors['meals.lunch']" class="mt-2" />
			<jet-input-error v-else-if="form.errors['meals.dinner']" :message="form.errors['meals.dinner']" class="mt-2" />
			<jet-input-error v-else-if="form.errors['meals.dessert']" :message="form.errors['meals.dessert']" class="mt-2" />
			<jet-input-error v-else-if="form.errors['meals.snack']" :message="form.errors['meals.snack']" class="mt-2" />
		</div>
		<div class="mt-4 flex justify-end">
			<jet-button :disabled="form.processing">{{ buttonText }}</jet-button>
		</div>
	</form>
</template>

<script>
import JetButton from "@/Jetstream/Button";
import JetCheckbox from "@/Jetstream/Checkbox";
import JetInput from "@/Jetstream/Input";
import JetInputError from "@/Jetstream/InputError";
import JetLabel from "@/Jetstream/Label";

export default {
	name: "RecipeForm",

	components: {
		JetButton,
		JetCheckbox,
		JetInput,
		JetInputError,
		JetLabel,
	},

	data() {
		return {
			form: this.$inertia.form({
				_method: this.method,
				name: '',
				location: '',
				meals: {
					breakfast: false,
					lunch: false,
					dinner: false,
					dessert: false,
					snack: false,
				},
			})
		}
	},

	props: {
		buttonText: {
			type: String,
			required: false,
			default: "Add Recipe",
		},
		recipe: {
			type: Object,
			required: false,
		},
		action: {
			type: String,
			required: false,
			default: "store",
		},
		method: {
			type: String,
			required: false,
			default: "POST",
		}
	},

	methods: {
		submit() {
			if (this.action === 'store') {
				this.form.post(this.route('recipes.store'), {
					onFinish: () => this.form.reset('name', 'location', 'meals')
				});

			} else if (this.action === 'update') {
				this.form.post(this.route('recipes.update', {recipe: this.recipe.id}));
			}
		}
	},

	created() {
		if (this.recipe) {
			this.form.name = this.recipe.name;
			this.form.location = this.recipe.location;
			this.form.meals.breakfast = Boolean(this.recipe.breakfast);
			this.form.meals.lunch = Boolean(this.recipe.lunch);
			this.form.meals.dinner = Boolean(this.recipe.dinner);
			this.form.meals.dessert = Boolean(this.recipe.dessert);
			this.form.meals.snack = Boolean(this.recipe.snack);
		}
	},
}
</script>

<style scoped>

</style>

My question is about the part in the submit() method when I call the onFinish() method. I expected the form to be completely reset, but what I find is that the name and location properties get reset fine, but all the meals in the meals object don't get reset to their original values (false), which should un-check the boxes if I understand it correctly.

This is probably a dumb question. I'm relatively new to InertiaJS and Laravel Jetstream, but I'm trying to get more familiar with it. Any help is greatly appreciated.

If it's not possible to reset values in a nested object, would it be possible to use the transform() method to change the request object before being sent to the backend to be formatted as it currently is? Meaning, if on the front end it needs to look like this:

_method: this.method,
name: '',
location: '',
breakfast: false,
lunch: false,
dinner: false,
dessert: false,
snack: false,

...is it possible to have it sent to the back end like this?:

_method: this.method,
name: '',
location: '',
meals: {
	breakfast: false,
	lunch: false,
	dinner: false,
	dessert: false,
	snack: false,
},