Getting update and delete working in Laravel 11 Inertia and Vue

I can't get the update and delete functionality working. The create functionality works.

web.php:

Route::post('/income', [IncomeController::class, 'create']);
Route::put('/income/{id}', [IncomeController::class, 'update']);
Route::delete('/income/{id}', [IncomeController::class, 'delete']);

This is my controller:

class IncomeController extends Controller
{
    public function create(Request $request)
    {
        Income::create($request->all());
        return redirect()->route('home');
    }

    public function update(Request $request, Income $income)
    {
        $income->update($request->all());
        return redirect()->route('home');
    }

    public function delete(Income $income)
    {
        $income->delete();
        return redirect()->back();
    }
}

This is Income.vue which has create functionality that works:

<template>
    <IncomeUpdate v-for="income in incomes" :key="income.id" :income="income"/>
    
    <form @submit.prevent="create">
      <div>
        <div>
          <label>Description</label>
          <input v-model="form.description" type="text" />
        </div>
        <div>
          <label>Amount</label>
          <input v-model="form.amount" type="text" />
        </div>
        <div>
          <label>Day Deposited</label>
          <input v-model="form.day_deposited" type="text" />
        </div>
        <div>
          <button type="submit">Create Income</button>
        </div>
      </div>
    </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'
import IncomeUpdate from './IncomeUpdate.vue';
defineProps({
  incomes: Array,
})
const form = useForm({
  description: null,
  amount: null,
  day_deposited: null,
  frequency: "Monthly",
  notes: null
  })
const create = () => {
  form.post('/income');
  form.description = "";
  form.amount = "";
  form.frequency = "Monthly";
  form.day_deposited = "";
}
</script>

And this is IncomeUpdate.vue which has both update and delete functionality which DO NOT work:

<template>
    <form @submit.prevent="update">
      <div>
        <div @input="update">
          <input v-model="form.description" type="text" />
          <input v-model="form.amount" type="text" />
          <input v-model="form.day_deposited" type="text" />
          <input v-model="form.notes" type="text" />            
          <Link :href="`/income/${props.income.id}`" method="DELETE" as="button" preserve-scroll>&nbsp Delete</Link>
        </div>
      </div>
    </form>
  </template>
 
  <script setup>
  import { useForm } from '@inertiajs/vue3'
  import { Link } from '@inertiajs/vue3'
  const props = defineProps({
    income: Object,
  })
  const form = useForm({
    id: props.income.id,
    description: props.income.description,
    amount: props.income.amount,
    frequency: props.income.frequency,
    day_deposited: props.income.day_deposited,
    notes: props.income.notes,
  })
  const update = () => 
    form.put(`/income/${props.income.id}`, {preserveScroll:true})
  </script>

I can get it working with a resource controller! I'm just trying to play around with it to clean it up but I think there's something I don't understand. Thanks