How do I prevent Livewire v2 from losing nested Eloquent model relationships?

I’m using Laravel 10 and Livewire v2 to create a DistributionGroup with nested DistributionGroupGroup’s, which in turn contain DistributionGroupAccount’s. When I add a new DistributionGroupGroup in my Livewire component, it overwrites the previously added groups. It seems like Livewire isn’t tracking these nested objects correctly. I'm wondering if I'm misusing objects in Livewire or models in Laravel.

Below is the relevant code:

DistributionGroup.php (model)

PHPCopied
use App\Models\Ledger\DistributionGroupGroup;

class DistributionGroup extends Model
{
    public $groups = [];

    public function __construct(array $attributes = []) {
        parent::__construct($attributes);
        $this->name = rand();
    }

    public function groups()
    {
        return $this->hasMany(DistributionGroupGroup::class);
    }

    public function addGroupGroup()
    {
        $groupGroup = new DistributionGroupGroup();
        $groupGroup->addAccounts();
        $this->groups[] = $groupGroup;
    }
}

DistributionGroupGroup.php (model)

PHPCopied
use App\Models\Ledger\DistributionGroupAccount;

class DistributionGroupGroup extends Model
{
    public $accounts = [];

    public function distributionGroup()
    {
        return $this->belongsTo(DistributionGroup::class, 'distribution_group_id');
    }

    public function distributionGroupAccount()
    {
        return $this->hasMany(DistributionGroupAccount::class, 'distribution_group_account_id');
    }

    public function addAccounts()
    {
        for ($i = 0; $i < 2; $i++) {
            $account = new DistributionGroupAccount();
            $account->credit_or_debit = ($i? 'Credit' : 'Debit').rand();//temporary name
            $this->accounts[] = $account;
        }
    }
}

DistributionGroupAccount.php (model)

PHPCopied
class DistributionGroupAccount extends Model
{
    public function distributionGroup()
    {
        return $this->belongsTo('App\Models\Ledger\DistributionGroup', 'distribution_group_id');
    }

    public function distributionGroupGroup()
    {
        return $this->belongsTo('App\Models\Ledger\DistributionGroupGroup', 'distribution_group_group_id');
    }
}

DistributionModal.php (Livewire component)

PHPCopied
class DistributionModal extends Modal
{
    public $distributionGroup;

    //Out of desperation, I added all properties of the nested objects to my rules
    protected function rules() {
        return [
            'distributionGroup.name' => ['required', 'max:250', new CaseInsensitiveUnique('cl_distribution_groups', 'name', $this->distributionGroup->id ?? null)],
            'distributionGroup.code' => ['nullable', 'max:50', new CaseInsensitiveUnique('cl_distribution_groups', 'code', $this->distributionGroup->id ?? null, true)],
            'distributionGroup.remarks' => 'nullable|string|max:250',
            'distributionGroup.archived' => 'boolean',
            'distributionGroup.groups.*.distribution_group_id' => 'nullable',
            'distributionGroup.groups.*.distribution_group_account_id' => 'nullable',
            'distributionGroup.groups.*.accounts.*.distribution_group_id' => 'nullable',
            'distributionGroup.groups.*.accounts.*.distribution_group_group_id' => 'nullable',
            'distributionGroup.groups.*.accounts.*.distribution_group_group_id' => 'account_id',
            'distributionGroup.groups.*.accounts.*.credit_or_debit' => 'string|max:250',
        ];
    }

    public function render()
    {
        return view('livewire.ledger.distribution-modal');
    }

    public function openNewDistributionGroup()
    {
        $this->resetErrorBag();
        $this->distributionGroup = new DistributionGroup();
        $this->addGroupGroup();

        $this->show = true;//shows the modal
    }

    public function addGroupGroup() {
        $this->distributionGroup->addGroupGroup();
    }
}

distribution-modal.blade.php (Livewire component)

HTMLCopied
<div>
    {{$distributionGroup->name}}

    @if (isset($distributionGroup->groups))
        @foreach ($distributionGroup->groups as $group)
            <div class="w-full flex gap-2" wire:key="clDistGrp-{{$group->id}}-{{rand()}}">
                @if (isset($group->accounts))
                    @foreach ($group->accounts as $account)
                        <p wire:key="clacct-{{$account->credit_or_debit.rand()}}">{{$account->credit_or_debit}}</p>
                    @endforeach
                @endif
            </div>
        @endforeach
    @endif
</div>

When setting the initial DistributionGroup name, I can confirm that the DistributionGroup instance persists. It’s only the nested objects (groups and their accounts) that are not maintained. Using dd(), I see that when addGroupGroup() is called in DistributionModal.php, the nested group objects disappear. Any insights on how to properly manage these nested objects in Livewire would be greatly appreciated.