Livewire/Alpine Dom template not updating - php

Question

first time using Livewire with Alpine and its a real pain to debug. Alpine console errors are so vague, is there anyway to make them more specific and verbose?
I digress.
I'm updating an array on livewire component which, when not empty, should be showing in the DOM. Everything works and when viewed in the console i can see that the changes are being made. inside the console everything is happening as it should. The trouble is, nothing i happening in the browser!
<div x-data="{ ...data() }" class="overflow-hidden wrapper w-full ">
<div class="flex justify-end w-full relative coins-container space-x-6">
<input id="search-toggle" type="search" pclass="block w-full bg-gray-100 focus:outline-none focus:bg-white focus:shadow text-gray-700 font-bold rounded-lg pl-12 pr-4 py-4 shadow-xl" wire:model.debounce.750ms="searched_term" />
</div>
#if($filtered_variable)
<template>
<div class="mt-1 wrapper">
<div id="search-content" class=" w-full text text-gray-600 rounded-lg overflow-y-auto bg-white shadow-xl" style="max-height: 500px;">
<div id="searchresults" class="h-auto w-full mx-auto">
#foreach ($filtered_variable as $index => $value)
<h1 x-text="{{$value['title']}}"></h1>
#endforeach
</div>
</div>
</div>
</template>
#endif
</div>
Class Searchbar extends Component
{
public $first_array;
public $searched_term;
public $filtered_array;
public function mount()
{
$db_content = Stuff::where(function ($query) {
$query->where('thing', false)
->orWhereNull('thing');
})
->with('variable_eg')
->get();
$this->first_array = $db_content;
$this->searched_term = '';
$this->filtered_array = [];
}
public function render()
{
return view('livewire.searchbar');
}
public function updated($name, $value)
{
if (empty($this->searched_term)) {
return '';
}
$this->filtered_array = array_filter($this->first_array, array($this, 'filter'));
public function filter($element)
{
$title = strtolower($element['title']);
if (strpos($title, $this->searched_term) !== false) {
return true;
}
}
}
inside the console I can see that my alpine/livewire component is receiving the filtered_value just as expected. But nothing is happening on the browser. How can I force rerender?

Answer 1

To update (refresh/rerender) your component you can use a listener
protected $listeners = ['refreshComponent' => '$refresh'];
Then when the refreshComponent event is emitted, it will refresh the component without running any other actions.
There is a Github discussion in the Livewire repo describing this.
Regarding your updating and filter methods (just as a hint):
There are also special methods like updatingFoo, updatedFoo that run before/after an item foo is updating. See the Lifecycle Hooks.