Instead of setting the contents of search in the mounted() hook, set in in the data() method:
data(){
return{
search: this.filters.search ?? null,
}
}
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm following Jeffrey Way's tutorial on Inertia for a project I'm building This one
My vue file:
data() {
return {
search: '',
}
},
mounted() {
this.search = this.filters.search ?? '';
},
watch: {
search(value) {
Inertia.get('/contacts', { search: value }, {
preserveState: true,
replace: true,
})
}
My controller:
$contacts = Model::query()
->paginate(10)
->withQueryString();
return Inertia::render('Contacts/List', [
'contacts' => $contacts,
'filters' => request()->only(['search']),
'currentPage' => request()->page,
]);
It all works perfectly if the mounted block is missing. With it, on every Inertia reload a "new search" is registered (since it's changed in the mounted hook and the watcher fires) and it returns to page 1, so basically, every time you change the page it returns you to page 1.
It should be working perfectly with the Composition API's setup as shown in the tutorial, but not sure why can't I get it to work here.
Instead of setting the contents of search in the mounted() hook, set in in the data() method:
data(){
return{
search: this.filters.search ?? null,
}
}
Please or to participate in this conversation.