404 on model deletion

[bjhfransen]

Creating and updating modals are working fine, but when I have a modal that asks for a confirmation to delete a given model I get a 404 and all modals are broken (all showing 404). I feel it's somewhere in the rehydration mechanics of the package. Tried to look into it and see if I could invoke the destroyComponent method and populate it with the activeComponent property. But to no avail. Went down in the inner workings of Livewire, events and hydration - but while I've learned a thing or two I din't find an answer there. I tried to comment of portions of logic, but also not the solution. Currently I'm down 8 hours trying to find clues in the inner workings of the package, but I ran out of ideas to tackle it. Thought it might be an issue.

Logic:

• User clicks delete button on a card (that's inside a livewire component) (overview component that holds all card components)
• Confirmation modal pops up, showing descriptive info about the item to be deleted (and I feel this is where the issue lies: later on this model containing the info is removed from the database and somewhere a findOrFail/or alike happens)
• User clicks, Yes, delete button. Triggers the delete() method on the component
• Some validation happens, if all is OK it emits an event to the parent component to delete a card component. After emitting the dialog is closed (assuming all following logic will happen)
• Event is fetched by the parent, deletes the actual item from the database
• Parent emits an event to rerender itself

Issue:

• Upon rerendering the 404 is shown. I've tested up and above, left and right. But I got the idea that somehow there's a reference to the item deleted in a cache and it can't find that.

Solution:

• Have a way to destroy such a reference?

Image of confirmation modal

Image of the 404 happening (this happens to all elements that can call a modal; in my case for creating a new character, updating an existing one from the overview with cards, or deleting another one from the overview with cards)

From DeleteCharacter (modal)

public function delete()
    {
        if (!$this->authorized()) {
            abort(403);
        }

        $this->dispatch('characters-overview.delete', character: $this->character);

        $this->closeModal();
    }

From CharactersOverview (parent component, holding all the cards)

public function delete(Character $character)
    {
        if (!$this->authorized($character)) {
            abort(403);
        }

        if ($character->image) {
            Storage::disk('public')->delete($character->image->path);
            $character->image->delete();
        }

        $character->delete();

        $this->dispatch('characters-overview.show');
    }

From CharactersOverview too

#[On('characters-overview.show')]
    public function render()
    {
        $this->characters = Project::find($this->project->id)->characters()->get();

        return view('livewire.characters-overview');
    }