The popup only collects input (e.g. search keyword, filters). The parent ( Merchant Note List ) handle the API request.

Filter collect and emit search function with user input

// Call parent method to do the API Request
const search = () => {
    emits('search', {
        search: form.search || '',
        type: form.type || '',
        status: form.status || '',
        start: dateRange.value.start ? parseDateValueToYMD(dateRange.value.start) : '',
        end: dateRange.value.end ? parseDateValueToYMD(dateRange.value.end) : '',
    });
    show.value = false;
};

Search with params

const search = async (_data: any) => {
    try {
		    // GET request to fetch notes for a specific merchant 
		    // with optional search/filter criteria.
        const response = await axios.get(`/merchants/${merchantId.value}/notes`, {
            params: _data,
        });
        notes.value = response.data.data;
    } catch (err) {
        messagePromptRef.value?.show(undefined, err.response?.data?.message);
    } finally {
        isLoading.value = false;
    }
};

// web.php - route
Route::get('/merchants/{merchant}/notes', [NoteController::class, 'getMerchantNotes'])->name('getMerchantNotes');

// Retrieve a filtered list of notes associated with a specific merchant.
public function getMerchantNotes(MerchantNoteFilterRequest $request, Merchant $merchant)
    {
        $query = $merchant->notes()->with(['creator']);;
				
				// text search
        if ($request->filled('search')) {
            $query->where(function ($q) use ($request) {
                $q->where('title', 'like', '%' . $request->search . '%')
                    ->orWhere('body', 'like', '%' . $request->search . '%');
            });
        }
				
				// Query match type
        if ($request->filled('type')) {
            $query->where('type', $request->type);
        }
				// Query match status
        if ($request->filled('status')) {
            $query->where('status', $request->status);
        }
				// Query date >= from date
        if ($request->filled('date.start')) {
            $query->whereDate('created_at', '>=', $request->input('date.start'));
        }
				// Query date <= end date
        if ($request->filled('date.end')) {
            $query->whereDate('created_at', '<=', $request->input('date.end'));
        }

        return NoteResource::collection($query->latest()->get());
    }