@dobbel thanks a lot for the explanation and tips on how to solve it

q-select
	class="q-mb-md"
    dense
    outlined
    v-model="region"
    @filter="filterRegion"
    use-input
    input-debounce="0"
    :options="regionOptions"
    hint="Region"
    label="Select Region"
    bottom-slots
    :loading="loadingRegion"
    @input="loadProvince"
    :rules="[ val => !!val || 'Region is required']"
    >
    <template v-slot:no-option>
        <q-item>
            <q-item-section class="text-grey">
                No results
            </q-item-section>
        </q-item>
    </template>
</q-select>

changing the value of region does not trigger @input event

this.region  = {
 	value: “test”,
	label: “test”
}
//this will not trigger @input event

I have a lot of data to render on my table.

5k plus data. I limit it 50 records per page.

The problem is when the next pagination is pressed the scroll stays where you left it.

I want to scroll to the top again when i press the next pagination

Thanks