Search with keyup vuejs and laravel backend api

I want to get data from two tables Employee and Company via search by typing Company name, not by company Id the tables are linked with one-to-many Relationship.they rest search functionality is working perfectly. Search by the company is not working and when I cleared the textbox it gives me this error

app.js:98211 [Vue warn]: Error in render: "TypeError: Cannot read property 'Company' of undefined"

any help would be highly appreciated.

Code in EmployeeController is :

public function index() { $date=\Carbon\Carbon::today(); $employee=Employee::with('company')->with('nationality')->where('expiredate','>',$date) ->orderBy('BadgeCode', 'desc')->paginate(5); return response()->json($employee); }

public function search(){
      
       if($search = \Request::get('q')){
           
             $employees = Employee::with('company')->where(function($query) use ($search){
                  foreach($employees->company AS $company){ 
                     $searcompany = $company->Company;
                }
                $query->Where('BadgeCode','LIKE',"%$search%")
                 ->orWhere($searcompany,'LIKE',"%$search%")
                ->orWhere('tazker','LIKE',"%$search%")
                ->orWhere('lastname','LIKE',"%$search%")
                ->orWhere('firstname','LIKE',"%$search%")
                ->orWhere('serialnumber','LIKE',"%$search%")
                 ->orWhere('BadgeType','LIKE',"%$search%");
            })->orderBy('BadgeCode','desc')->paginate(20);
    
        }        else{
           $employees = Employee::latest()->paginate(5);
                     }
         return $employees;
    
    }

Code in Employee.vue is :

<div style="margin-left:450px; margin-top:0px;margin-bottom:-10px;">
              <h3 class="card-title">
                <div class="card-tools">
                  <div class="input-group input-group-sm" style="width: 250px;">
                    <input
                      name="table_search"
                      class="form-control float-right"
                      placeholder="Search"
                      @keyup="searchit"
                      v-model="search"
                      type="search"
                      aria-label="Search"
                    />
                    <div class="input-group-append">
                      <button type="submit" class="btn btn-default" @click="searchit">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </h3>
            </div>

Script Code in Employee.vue is :

 export default {
    data() {
        return {
employees :{},
     search: "",
    },
        methods: {
            searchit: _.debounce(() => {
              Fire.$emit("searching");
            }, 300),
    },

    created() {
        Fire.$on("searching", () => {
          let query = this.search;
          axios
            .get("api/findemployee?q=" + query)
            .then(data => {
              this.employees = data.data;
            })

            .catch(() => {});
        });
    }
    }

API Rout is :

Route::get('findemployee','API\EmployeeController@search');