Generate excel based on the query from database using vue and laravel maatwebsite package

Basically I got a query to get all the record based on the date from and to. I use maatwebsite package in laravel. The problem is if I click the generate button it will not generate an excel file. I'm using version 2.x of this package because it is the stable one. Can someone help me with this? I just only want to print the results of the query in the excel format. I won't change the version to 3.x because if I do that, the import functions of the other component won't work for version 3.x . Thanks a lot

My controller, don't mind the dd just for test purposes

  public function generateReport(Request $request){

        $date = \DB::table('checkers')
        ->where('remarks_id',2)
        ->join('schedules','schedules.id','=','checkers.schedule_id')
        ->join('teachers','schedules.teacher_id','=','teachers.id')
        ->join('subject_codes','subject_codes.id','=','schedules.subject_code_id')
        ->join('remarks','remarks.id','=','checkers.remarks_id')
        ->where('checkers.created_at', '=>', $request->from)
        ->where('checkers.created_at', '=<', $request->to)
        // ->whereBetween('checkers.created_at', [Carbon::now()->startOfWeek(), Carbon::now()->endOfWeek()])
        ->select('teachers.fullname','subject_codes.subject_description','remarks.remarks_desc','checkers.created_at')
        ->get(); 

        dd($request->from);

        return Excel::download('users.xlsx');
    }

If i hit the generate button i got error of Laravel Excel method [download] does not exist

Another problem for this is even if i dd the request, it returns null i don't even know what is happening, i got v-model in vue to get the request still cant show.

My vue component

         <form action="">
                   <div class="col-xs-4 form-group">
                        <label>Start Date</label>
                       <date-picker name="from" id="from" v-model="from" :config="options" ></date-picker>
                    </div>
                    <div class="col-xs-4 form-group">
                        <label>End Date</label>
                          <date-picker name="to" id="to" v-model="to" :config="options" ></date-picker>
                    </div>
               </form>
            </div>
            <div class="box-footer">
                  <a type="button" href="/generate" >
                    <button  class="btn btn-info">
                        Generate Excel
                    </button>
                </a>
            </div>

The script, in the routes.php, the route for generating is /generate and it points to the controller method generateReport

      data(){
            return{
                    from: new Date(),
                    options: {
                    format: 'YYYY-MM-DD',
                    showClear: true,
                    showClose: true,
                    },

                    to: new Date(),
                    options: {
                    format: 'YYYY-MM-DD',
                    showClear: true,
                    showClose: true,
                    } 
            }
        },
        created() {
            console.log('Component mounted.')
        },
        methods:{
            generate(){
                axios.get('/generate')
                    .then((res)=>{
                        console.log('asd')
                    })
            }
        }