Transitions with keys in multiple components on the same page

#1

Hello,

I am trying to get transitions to work in multiple Livewire components on a single page. It works on the very last one in the example but I can’t get any transitions to work in “list-companies”, or “company-name”. This is more less acting like a spa but has some limited page reloads in certain areas.

snippet of a transition that works in “create-note”

<span wire:transition.slide.down.500ms wire:key="error_note" class="error text-red-600 border-2 border-red-500 block p-2 mb-2 " > {{ $message }}</span>

The view file

<div class="admin-sidebar">
		<section class="header">
			<h1 class="my-4">Companies:</h1>		
		</section>		
		{{-- @include('companies.partials.contacts') --}}
		@livewire('list-companies', $companies)
	</div>
	<div class="admin-main">
		
		@livewire('company-name', $company)

		@include('companies.partials.company-nav')

	<div class="tab-content" id="myTabContent">
	  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
	  	<h2 class="text-3xl mb-8">Company Notes</h2>

		@livewire('create-note')