Фильтр поиска не получает данные, пока не нажмет кнопку поиска

Это проект laravel vuejs. Вот фото моей страницы продукта:

Товары должны были отображаться на этой странице, но она полностью пуста, пока я не нажму кнопку поиска. После нажатия на кнопку поиска страница загружает продукты, и опция поиска также работает.

Мои коды:

веб.php ->

Route::get('/', 'App\Http\Controllers\Mastercontroller@index');

Route::get('/search', 'App\Http\Controllers\Mastercontroller@search');

Route::any('{slug}', 'App\Http\Controllers\Mastercontroller@index');

Мастерконтроллер.php ->

<?php

namespace App\Http\Controllers;

use App\Models\myproductcase;
use Illuminate\Http\Request;

class Mastercontroller extends Controller
{
     public function index(){
        return view('welcome');
     }

     public function search(Request $r){
    
        $search = $r->get('q');
        return myproductcase::where('name','LIKE','%'.$search.'%')->get();
     }
 }

страница продукта ->

   <template>
   <div>

   <div class = "search"><input v-model = "search" type=text></input><button 
   @click.prevent = "makesearch()">Search</button></div>
     
     <div class = "product-list">
        <div v-if = "showsearch==true"> 
             <div v-for = "getresult in getdata" v-bind:key = "getresult.id">
                    <div class = "product">
                    <h1>{{getresult.name}}</h1>
                    <h3>{{getresult.price}}</h3>
                    <p>{{getresult.description}}</p>
             </div>    
        </div> 
        <div v-if = "showsearch==false">
            no data found
            </div>    
         </div>               
      </div>
    </div>  
</template>
<script>
export default{
    data(){
        return{
        search : '',
        showsearch : false,
        getdata : []
     }
   },
   methods : {
       async makesearch(){
            fetch('/search?q='+this.search).then(hi=>hi.json()).then(hi=>{
                    console.info();
                    this.getdata = hi;
                    this.search = '';
                    this.showsearch = true;
                }).catch(err=>{
                    console.info(err);
                });
            }   
        
       },
   
   }
</script>