実装

Laravelでバリデーションエラーが発生した際にビューにアラートメッセージを表示するコンポーネントを作成しています

<livewire:alert-message :key="'alert_message_'.$id" />

ループ内で呼び出しをおこなっており、ループしているコンテンツごとの枠内にアラートを表示するような形です
$idはループごとにユニークです

php
1// alert-message.blade.php
2
3@if ($errors->any())
4    <div class="bg-red-100 border-t-4 border-red-400 rounded-b text-red-700 px-4 py-3 shadow-md my-2" role="alert">
5        <div class="flex">
6            <svg xmlns="http://www.w3.org/2000/svg"
7                class="stroke-2 stroke-current h-8 w-8 mr-2 "
8                viewBox="0 0 24 24"
9                fill="none"
10                stroke-linecap="round"
11                stroke-linejoin="round"
12            >
13                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
14                <line x1="12" y1="8" x2="12" y2="12"></line>
15                <line x1="12" y1="16" x2="12.01" y2="16"></line>
16            </svg>
17            <div class="alert alert-danger pt-1.5">
18                <ul>
19                    @foreach ($errors->all() as $error)
20                        <li>{{ $error }}</li>
21                    @endforeach
22                </ul>
23            </div>
24        </div>
25    </div>
26@endif

コンソールエラー

呼び出し側でkeyも設定しているのですが、以下のようなエラーが発生します。
（ネストしたコンポーネントで、どのコンポーネントかが判断できない状態のときに出るエラーと認識しています）

Uncaught (in promise) TypeError: Cannot read property 'fingerprint' of null

疑問

コンポーネント内の @if ($errors->any()) と、すぐ内側にある <div ...> を入れ替えると該当のエラーが発生しなくなります。
ただし、エラーがない場合にdiv要素が表示されてしまっているので、意図している動作にはなっていません。

php
1<div class="bg-red-100 border-t-4 border-red-400 rounded-b text-red-700 px-4 py-3 shadow-md my-2" role="alert">
2    @if ($errors->any())
3        <div class="flex">
4            <svg xmlns="http://www.w3.org/2000/svg"
5                class="stroke-2 stroke-current h-8 w-8 mr-2 "
6                viewBox="0 0 24 24"
7                fill="none"
8                stroke-linecap="round"
9                stroke-linejoin="round"
10            >
11                <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
12                <line x1="12" y1="8" x2="12" y2="12"></line>
13                <line x1="12" y1="16" x2="12.01" y2="16"></line>
14            </svg>
15            <div class="alert alert-danger pt-1.5">
16                <ul>
17                    @foreach ($errors->all() as $error)
18                        <li>{{ $error }}</li>
19                    @endforeach
20                </ul>
21            </div>
22        </div>
23    @endif
24</div>