Вложенные острова в Livewire

Давайте разберём такой случай. Внутри большого блока поста есть маленький счётчик. Обновление внешней части сбрасывает цифру внутри, хотя она не должна была измениться.

Вложенный остров при запросе к внешнему не перерисовывается: Livewire пропускает его и оставляет прежнюю разметку.

Страница откроется по адресу /posts/nest. Давайте создадим компонент PostNest:

php artisan make:livewire PostNest --class

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/nest', function () {
		return view('posts-nest');
	});
?>

<x-layout>
	<livewire:post-nest />
</x-layout>

Давайте в шаблоне вложим два именованных острова и выведем в каждом секунду через функцию date:

<div>
	@island(name: 'outer')
		{{ date('s') }}
		@island(name: 'inner')
			{{ date('s') }}
		@endisland
	@endisland
	<button
		type="button"
		wire:click="$refresh"
		wire:island="outer"
	>
		Refresh
	</button>
</div>

Давайте опишем класс компонента:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostNest extends Component
	{
		public function render()
		{
			return view('livewire.post-nest');
		}
	}
?>

Создайте компонент EmployeeNest. Обновление внешнего блока работника не сбрасывает число внутри.