Livewire v3 nested component refresh parent and children

I have nested components in Livewire like Files > SingleFile. In my SingleFile component I have a delete button which dispatches a deleteFile like:

    public function delete()
    {
        $this->dispatch('deleteFile', dataFile: $this->dataFile->id);
    }

In my Files component I have a listener like:

    protected $listeners = [
        'deleteFile' => 'detach',
    ];

and the detach method like:

    public function detach(DataFile $file)
    {
        $this->detachAndDeleteFile($file, $this->step); // this method works and dissociates the file from the db and deletes it

        $this->files= $this->step->files()->get();
    }

However, the last line $this->files does not get the new files list, and the nested component is still there for that file. When I refresh the page however, it is gone as fresh files are fetched. Any suggestions on how to fix this.