Making a search bar component in InertiaJS (Nested Routes)

I'm currently doing my first Inertiajs project and I managed to do a searchable list with a Vue Component I can call anywhere. But when I go into nested routes, I don't manage to make my url to search the term I'm sending:

controller.php:

public function index($id, Request $request)
   {

       $histories = HistoryProjects::query()
            ->orderBy('name','ASC')
            ->when($request->term, function ($query, $term ){
                $query->where('name','LIKE','%' . $term . '%');})
            ->with('users')
            ->with('projects')
            ->paginate(10)
            ->withQueryString()
            ->sortBy('name');

        return Inertia::render('HistoryProjects/Index', [
       
            'histories' =>  $histories,
            'paginator' =>HistoryProjects::paginate(10)
          
         ]);
  }

My Search.vue:

<template>
  <div class="flex items-center">
    <div class="flex w-full bg-white shadow rounded">
       <input class="relative w-full px-6 py-3 rounded focus:ring focus:ring-yellow-600 z-0" id="search" autocomplete="on" type="text" name="search" placeholder="Buscar…" :value="search" @input="$emit('update:search', $event.target.value)" />
    </div>
    <button class="ml-3 text-sm text-gray-500 hover:text-gray-700 focus:text-red-500 text-yellow-600 border-2 rounded-md p-3 bg-white" type="button" click="document.getElementByTagName('search').value = ''" @reset="$emit('delete:search', $event.target.value)">Resetear</button>
  </div>
</template>

<script>

export default {
  components: {
   
  },
  props: {
    search: {
      type: String,
      default: ''
    }
  },
   emits: ['update:search', 'delete:search'],
}
</script>

My component in vue.app:

<search id="search" class="w-full max-w-md mr-10"  v-model:search="term" @keyup="searchFor" @click="resetQuery()">
          </search>

And in my script part:

 methods: {
    
    resetQuery() {
    
      this.$inertia.replace(this.route('history.index', this.histories[0].project_id, ''))
      var inputs = document.getElementsByTagName('input');
      for (var i=0 ; i < inputs.length ; i++){
        if (inputs[i].type == "text"){
            inputs[i].value = "";
        }
      }
    },
    searchFor() {

      this.$inertia.replace(this.route('history.index', this.histories[0].project_id, {term:this.term}))
      
    }

My url is something like "http://mywebsite/projects/42/history"

When I search in my project page, it works properly: "http://mywebsite/projects?term="hi""

But in my nested history project it doesn't work and I'm running out of ideas, because the reset query works in fact, but the searchFor() doesn't make any change in my url.

In my Vue inspector I see that my prop called term is being modified, but the url doesn't change.

Thanks in advance!