A controller method is not being called from an Inertia form post

I have this template

<template>
    <dashboard-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
				<Link class="text-blue-600" :href="route('dashboard')">Dashboard</Link> / 
				Settings
				<label @click="submit" class="float-right text-xs bg-gray-800 rounded-lg text-white hover:bg-gray-700 px-4 py-2 cursor-pointer">SAVE CHANGES</label>
            </h2>
        </template>

		<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
			<form id="settings_form" @submit.prevent="submit">
				<h1 class="text-xl font-black mb-1">Template</h1>
				<p class="my-2">Select a template for your store</p>
				<div class="grid grid-cols-3 gap-4">
					<label for="default" class="p-4 border rounded-lg cursor-pointer">
						Default
						<input v-model="form.shop_template" id="default" value="default" type="radio" class="float-right right-0 mt-1">
					</label>
					<label for="awesome" class="p-4 border rounded-lg cursor-pointer">
						Awesome
						<input v-model="form.shop_template" id="awesome" value="awesome" type="radio" class="float-right right-0 mt-1">
					</label>
				</div>

				<h1 class="text-xl font-black mb-1 mt-6">Payments</h1>
				<p class="my-2">Choose the payment methods to be enabled on your store</p>
				<div>
					<jet-label for="cash_on_delivery">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_payment_options" value="cash_on_delivery" id="cash_on_delivery" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								Cash on delivery
							</div>
						</div>
					</jet-label>
					<jet-label for="mobile_money">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_payment_options" value="mobile_money" id="mobile_money" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								Mobile money
							</div>
						</div>
					</jet-label>
					<jet-label for="paypal">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_payment_options" value="paypal" id="paypal" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								Paypal
							</div>
						</div>
					</jet-label>
					<jet-label for="card">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_payment_options" value="card" id="card" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								Card (Visa or Mastercard)
							</div>
						</div>
					</jet-label>
				</div>

				<h1 class="text-xl font-black mb-1 mt-6">Shipping</h1>
				<p class="my-2">Select shipping methods your store provides</p>
				<div>
					<jet-label for="same_day_shipping">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_shipping_options" value="same_day_shipping" id="same_day_shipping" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								Same day shipping
							</div>
						</div>
					</jet-label>
					<jet-label for="2_day_shipping">
						<div class="flex items-center">
							<input type="checkbox" v-model="form.shop_shipping_options" value="2_day_shipping" id="2_day_shipping" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
							<div class="ml-2">
								2-day shipping
							</div>
						</div>
					</jet-label>
				</div>

				<h1 class="text-xl font-black mb-1 mt-6">Domain: <span class="font-gray-300 font-thin lowercase">{{this.$page.props.user.shop_name}}.copify.com</span></h1>
				<p class="my-2">Add your custom domain</p>
				<div class="mt-2">
					<jet-input id="shop_domain" type="text" v-model="form.shop_domain" class="mt-1" />
				</div>
				<jet-button class="mt-4 float-right">
					Save Changes
				</jet-button>
			</form>
		</div>
    </dashboard-layout>
</template>

<script>
    import DashboardLayout from '@/Layouts/DashboardLayout.vue'
    import { Head, Link } from '@inertiajs/inertia-vue3'
    import JetInput from '@/Jetstream/Input.vue'
    import JetCheckbox from '@/Jetstream/Checkbox.vue'
    import JetLabel from '@/Jetstream/Label.vue'
    import JetButton from '@/Jetstream/Button.vue'

    export default {
        components: {
            DashboardLayout,
            Head,
            Link,
            JetInput,
            JetCheckbox,
            JetLabel,
			JetButton
        },

        data() {
            return {
                form: this.$inertia.form({
					_method: 'PATCH',
                    shop_template: '',
                    shop_payment_options: [],
                    shop_shipping_options: [],
					shop_domain: ''
                })
            }
        },

        methods: {
            submit() {
                this.form.post(this.route('shops.update', 1))
            }
        }
    }
</script>

And then, this controller...

public function update(Request $request, Shop $shop)
    {
        return $request;
        // dd($request);
    }

Route also defined as...

Route::resource('shops', ShopController::class);

The function in the template is being called because when I console.log() something, it shows in the browser console. but the controller method, for some reason doesn't respond.