Struggling With Livewire Database Queries

Hey all,

it's been ages since I worked with DBs and I'm trying to pick up Livewire and I'm lost.

I'm tying to build a todo type app, but one that has multiple notepads (ie say one for housework, a shopping list, etc) with all their note items iterated below. I'm not sure where I've gone wrong, but I can't seem to access my note items without jumping through what seems like extra hoops

create_notepads_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('notepads', function (Blueprint $table) {
            $table->id();
            $table->string('table_name')->unique();
            $table->string('table_desc');
            $table->foreignId('user_id')->constrained();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('notepads');
    }
};

create_notes_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('notes', function (Blueprint $table) {
            $table->id();
            $table->string('note_item');
            $table->string('note_desc')->nullable();
            $table->foreignId('notepad_id')->constrained()->onDelete('cascade');
            $table->foreignId('user_id')->constrained();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('notes');
    }
};

Notepad.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;


class Notepad extends Model
{
    /** @use HasFactory<\Database\Factories\NotepadFactory> */
    use HasFactory;

    protected $fillable = [
        'table_name', 'table_desc'
    ];

    public function user(): BelongsTo{
        return $this->belongsTo(User::class);
    }

    public function note(): HasMany{
        return $this->hasMany(Note::class);
    }
}

Note.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Note extends Model
{
    /** @use HasFactory<\Database\Factories\NoteFactory> */
    use HasFactory;

    protected  $fillable = [
        'note_item',
        'note_desc'
    ];

    public function user(): BelongsTo{
        return $this->belongsTo(User::class);
    }
    public function notepad(): BelongsTo{
        return $this->belongsTo(Notepad::class);
    }
}

User.php

<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Relations\HasMany;

class User extends Authenticatable
{
    /** @use HasFactory<\Database\Factories\UserFactory> */
    use HasFactory, Notifiable;

....

    public function notepads(): HasMany{
        return $this->hasMany(Notepad::class);
    }

    public function notes(): HasMany{
        return $this->hasMany(Note::class);
    }
}

Livewire - Notepads.php (I know, poorly named)

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Notepad;
use App\Models\Note;
use Illuminate\Support\Facades\Auth;

class Notepads extends Component
{

    public function render()
    {
        return view('livewire.notepads',[
            'notepad' => Notepad::all(),
            'notes' => Note::all()
        ]);
    }
}

notepads.blade.php

<div class="grid auto-rows-min gap-4 md:grid-cols-3">
    @foreach($notepad as $item)
        <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700" wire:key{{ $item->id }}>
            <div class="w-full bg-gray-800 py-2">
                <h1 class="m-1 px-4 font-extralight">
                    {{ $item->table_name }}
                </h1>
            </div>
            <div class="font-extralight text-sm">
                @foreach($notes as $note_item)
                    <p class="mt-2 px-4">
                        {{ $note_item }}
                    </p>
                @endforeach
            </div>
        </div>
    @endforeach
</div>

This outputs ALL the notes for ALL the notepads, but I want just the notes that belong to a specific notepad. I'm lost as to where to go next - or if my database relationships are buggered. I think I can do a where query in the blade file but that seems hacky. Do I use a nested Livewire component?