Edit.vue is not calling the model

I'm trying to create a simple edit form. When the form loads the values from the prop are null. I'm using clockwork and it looks like the model is not loading. I can't figure out why. I'm sure it's something simple but I can't figure it out and kinda losing my mind. Any help would be appreciated!

Also, I'm very new to coding and this is my first post. I'm not even sure my question makes sense. Please let me know if more info is needed.

Here's the model

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;


class MealService extends Model
{
    use HasFactory;
    use SoftDeletes;

    public function resolveRouteBinding($value, $field = null)
        {
            return $this->where($field ?? 'id', $value)->withTrashed()->firstOrFail();
        }

    public function site()
    {
        return $this->belongsTo(Site::class);
    }

    public function scopeFilter($query, array $filters)
    {
        $query->when($filters['search'] ?? null, function ($query, $search) {
            $query->WhereHas('site', function ($query) use ($search) {
                $query->where('name', 'like', '%'.$search.'%');
            });
        })->when($filters['trashed'] ?? null, function ($query, $trashed) {
            if ($trashed === 'with') {
                $query->withTrashed();
            } elseif ($trashed === 'only') {
                $query->onlyTrashed();
            }
        });
    }
}

Here's the controller:

<?php

namespace App\Http\Controllers;

use App\Models\MealService;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Request;
use Illuminate\Validation\Rule;
use Inertia\Inertia;

class MealServicesController extends Controller
{

    public function index()
    {
        return Inertia::render('MealServices/Index', [
            'filters' => Request::all('search', 'trashed'),
            'mealServices' => MealService::query()
                ->with('site')
                ->orderBy('site_id')
                ->orderBy('meal_type')
                ->filter(Request::only('search', 'trashed'))
                ->paginate(10)
                ->withQueryString()
                ->through(fn ($meal_service) => [
                    'id' => $meal_service->id,
                    'site' => $meal_service->site ? $meal_service->site->only('name') : null,
                    'meal_type' => $meal_service->meal_type,
                    'adults' => $meal_service->adults,
                    'tally' => $meal_service->tally, 
                ]),
        ]);
    }

    public function create()
    {
        return Inertia::render('MealServices/Create', [
            'sites' => Auth::user()->sfa
                ->sites()
                ->orderBy('name')
                ->get()
                ->map
                ->only('id', 'name'),
        ]);
    }

    public function store()
    {
        MealService::create(
            Request::validate([
                'site_id' => ['nullable', Rule::exists('sites', 'id')->where(function ($query) {
                    $query->where('sfa_id', Auth::user()->sfa_id);
                })],
                'meal_type' => ['required', 'max:10'],
                'adults' => ['required', 'boolean'],
                'tally' => ['required', 'boolean'],
            ])
        );

        return Redirect::route('mealServices')->with('success', 'Meal service created.');
    }

    public function edit(MealService $meal_service)
    {
        return Inertia::render('MealServices/Edit', [
            'mealService' => [
                'id' => $meal_service->id,
                'site' => $meal_service->site ? $meal_service->site->only('name') : null,
                'meal_type' => $meal_service->meal_type,
                'adults' => $meal_service->adults,
                'tally' => $meal_service->tally, 
                'deleted_at' => $meal_service->deleted_at,
            ],
            'sites' => Auth::user()->sfa
                ->sites()
                ->orderBy('name')
                ->get()
                ->map
                ->only('id', 'name'),
        ]);
    }

    public function update(MealService $meal_service)
    {
        $meal_service->update(
            Request::validate([
                'site_id' => [
                    'nullable',
                    Rule::exists('sites', 'id')->where(fn ($query) => $query->where('sites_id')),
                ],
                'meal_type' => ['required', 'max:50'],
                'adults' => ['required', 'boolean'],
                'tally' => ['required', 'boolean'],
            ])
        );

        return Redirect::back()->with('success', 'Meal service updated.');
    }

    public function destroy(MealService $meal_service)
    {
        $meal_service->delete();

        return Redirect::back()->with('success', 'Meal service deleted.');
    }

    public function restore(MealService $meal_service)
    {
        $meal_service->restore();

        return Redirect::back()->with('success', 'Meal service restored.');
    }
}

Here are the routes:

Route::get('mealServices/{mealService}/edit', [MealServicesController::class, 'edit'])
->name('mealServices.edit')
->middleware('auth');

Route::put('mealServices/{mealService}', [MealServicesController::class, 'update'])
->name('mealServices.update')
->middleware('auth');

Route::delete('mealServices/{mealService}', [MealServicesController::class, 'destroy'])
->name('mealServices.destroy')
->middleware('auth');

Route::put('mealServices/{mealService}/restore', [MealServicesController::class, 'restore'])
->name('mealServices.restore')
->middleware('auth');

And the code for the form:

<template>
  <div>
    <Head :title="form.meal_type" />
    <h1 class="mb-8 text-3xl font-bold">
      <Link class="text-indigo-400 hover:text-indigo-600" href="/mealServices">Meal Services</Link>
      <span class="text-indigo-400 font-medium">/</span>
      {{ form.meal_type }}
    </h1>
    <trashed-message v-if="mealService.deleted_at" class="mb-6" @restore="restore"> This meal service has been deleted. </trashed-message>
    <div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
      <form @submit.prevent="update">
        <div class="flex flex-wrap -mb-8 -mr-6 p-8">
          <select-input v-model="form.site_id" :error="form.errors.site_id" class="pb-8 pr-6 w-full lg:w-1/2" label="Site">
            <option :value="null" />
            <option v-for="site in sites" :key="site.id" :value="site.id">{{ site.name }}</option>
          </select-input>
          <select-input v-model="form.meal_type" :error="form.errors.meal_type" class="pb-8 pr-6 w-full lg:w-1/2" label="Meal Type">
            <option :value="null" />
            <option value="Breakfast">Breakfast</option>
            <option value="Lunch">Lunch</option>
            <option value="Snack">Snack</option>
          </select-input>
          <select-input v-model="form.adults" :error="form.errors.adults" class="pb-8 pr-6 w-full lg:w-1/2" label="Adults">
            <option :value="null" />
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select-input>
          <select-input v-model="form.tally" :error="form.errors.tally" class="pb-8 pr-6 w-full lg:w-1/2" label="Tally">
            <option :value="null" />
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select-input>
        </div>
        <div class="flex items-center px-8 py-4 bg-gray-50 border-t border-gray-100">
          <button v-if="!mealService.deleted_at" class="text-red-600 hover:underline" tabindex="-1" type="button" @click="destroy">Delete meal service</button>
          <loading-button :loading="form.processing" class="btn-indigo ml-auto" type="submit">Update meal service</loading-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { Head, Link } from '@inertiajs/inertia-vue3'
import Layout from '@/Shared/Layout'

import SelectInput from '@/Shared/SelectInput'
import LoadingButton from '@/Shared/LoadingButton'
import TrashedMessage from '@/Shared/TrashedMessage'

export default {
  components: {
    Head,
    Link,
    LoadingButton,
    SelectInput,
    TrashedMessage,
  },
  layout: Layout,
  props: {
    mealService: Object,
    sites: Array,
  },
  remember: 'form',
  data() {
    return {
      form: this.$inertia.form({
        site_id: this.mealService.site_id,
        meal_type: this.mealService.meal_type,
        adults: this.mealService.adults,
        tally: this.mealService.tally,       
      }),
    }
  },
  methods: {
    update() {
      this.form.put(`/mealServices/${this.mealService.id}`)
    },
    destroy() {
      if (confirm('Are you sure you want to delete this organization?')) {
        this.$inertia.delete(`/mealServices/${this.mealService.id}`)
      }
    },
    restore() {
      if (confirm('Are you sure you want to restore this organization?')) {
        this.$inertia.put(`/mealServices/${this.mealService.id}/restore`)
      }
    },
  },
}
</script>