How to define 2 alpines components in 2 livewire files - laravel-livewire

Question

In laravel 7 /livewire 1.3 / alpinejs 2 project I make crud, when
for adding/editing I include livewire.admin.app-news.form inside of data listing(resources/views/livewire/admin/app-news/container.blade.php) :
in this file adminNewsComponent is defined :
<article class="admin_page_container">
<div class="form-admin-news" x-data="adminNewsComponent()" x-init="initAdminNewsComponent()" >
<div class="">
...
#include('livewire.common.alert_messages')
#if($updateMode=='edit' or $updateMode=='add')
#include('livewire.admin.app-news.form')
#endif
#if($updateMode=='browse')
#if(count($newsDataRows) == 0)
<div class="alert alert-info" role="alert">
No data found
</div>
#endif
#if(count($newsDataRows) > 0)
<div class="table-responsive table-wrapper-for-data-listing" x-data="selectedNewsIdsBoxXData()">
DATA LISTING
</div> <!-- <div class="table-responsive table-wrapper-for-data-listing"> -->
#endif {{-- #if(count($newsDataRows) > 0) --}}
#endif {{-- #if($updateMode=='browse') --}}
</div> <!-- <div class=""> -->
<section class="mt-2">
#if($updateMode=='browse' and count($newsDataRows) > 0)
{{ $newsDataRows->links() }}
#endif
</section>
</div> <!-- <div class=""> -->
</article> <!-- page_content_container -->
#push('styles')
<link href="/css/quill.snow.css" rel="stylesheet">
#endpush
#push('scripts')
<script src="{{ asset('/js/quill.js') }}"></script>
#endpush
#push('scripts')
<script>
function selectedNewsIdsBoxXData() {
console.log('!!!selectedNewsIdsBoxXData::')
...
}
function adminNewsComponent() {
...
} // function adminNewsComponent() {
</script>
#endpush
all methods and data of adminNewsComponent works ok but the problem is that when I open editor
form with line :
#if($updateMode=='edit' or $updateMode=='add')
#include('livewire.admin.app-news.form')
#endif
I can not define similar component inside of resources/views/livewire/admin/app-news/form.blade.php :
<article>
#inject('viewFuncs', 'App\library\viewFuncs')
<form class="form-editor" #if($updateMode=='edit') wire:submit.prevent="update"
#else wire:submit.prevent="store" #endif >
<div class="card" x-data="adminNewsEditorComponent()" x-init="initAdminNewsEditorComponent()" >
<div class="card-body card-block">
...
#section('scripts')
<script>
function adminNewsEditorComponent() {
I got
ReferenceError: adminNewsEditorComponent is not defined.
I suppose the reason is that #include( is used here and actually I would like to different files
and 2 different components defined.
How that coulkd be fixed ?
Thanks!

Answer 1

I've faced a similar issue like this. Let me explain the cause first.
Blade push works for the first render so that when we dynamically load a component with an if condition, the push will not work.
In other words, if the $updateMode = 'edit' or 'add' during the first render, then the push will add the scripts to the layout. If not it will not work with the consecutive renders with livewire.
#if($updateMode=='edit' or $updateMode=='add')
#include('livewire.admin.app-news.form')
#endif
So the only solution is to move the push scripts to the container.blade.php. then this error can be resolved.