まず、以下が該当ソースです。聞きたい箇所にNOTE:をつけています。

users.vue

vue
1<template>
2  <b-container fluid>
3    <h1>User3</h1>
4    <div>
5      <b-pagination
6        pills
7        :total-rows="state.total"
8        :per-page="state.perPage"
9        :value="state.currentPage"
10        @input="changeCurrentPage"
11      />
12    </div>
13    <div>
14      <b-table
15        head-variant="light"
16        stacked="sm"
17        hover
18        no-local-sorting
19        :busy.sync="state.busy"
20        :fields="fields"
21        :items="state.items"
22        :sort-by="state.sortBy"
23        :sort-desc="state.sortDesc"
24        @context-changed="changeContext"
25      >
26        <template #cell(id)="row">
27          <router-link
28            v-slot="{ href, navigate }"
29            :to="localePath({ path: `/users3/${row.value}` })"
30          >
31            <a :href="href" @click="navigate">Edit {{ row.value }}</a>
32          </router-link>
33        </template>
34      </b-table>
35    </div>
36    <div>
37      <b-button @click="search">refresh</b-button>
38    </div>
39  </b-container>
40</template>
41
42<script lang="ts">
43import {
44  computed,
45  defineComponent,
46  reactive,
47  useContext,
48  useStore,
49  useFetch,
50  onMounted,
51} from '@nuxtjs/composition-api'
52
53export interface Ctx {
54  perPage: number
55  currentPage: number
56  sortBy: string
57  sortDesc: boolean
58}
59
60export default defineComponent({
61  layout: 'loggedin',
62  setup() {
63    const { $axios, i18n } = useContext()
64
65    const store = useStore()
66    const state = reactive({
67      busy: true,
68      total: 0,
69      items: [],
70      // HACK: anyの使用
71      perPage: computed(() => (store as any).state.users.perPage),
72      currentPage: computed(() => (store as any).state.users.currentPage),
73      sortBy: computed(() => (store as any).state.users.sortBy),
74      sortDesc: computed(() => (store as any).state.users.sortDesc),
75    })
76
77    const fields = [
78      { key: 'id', sortable: false },
79      { key: 'email', label: i18n.t('user.email'), sortable: true },
80      { key: 'name', label: i18n.t('user.name'), sortable: true },
81      { key: 'updatedAt', label: i18n.t('updatedAt'), sortable: true },
82    ]
83
84    const search = async () => {
85      state.busy = true
86      const params = {
87        per: state.perPage,
88        page: state.currentPage,
89        sort: state.sortBy,
90        order: state.sortDesc,
91      }
92      try {
93        const data = await $axios.$get(`/api/users`, { params })
94        // NOTE: onMounted,useFetch どちらを使用してもアクセスしてるし、きちんとデータも取得できていることを確認。
95        console.log('data:', data)
96        state.total = data.total
97        state.items = data.items
98      } finally {
99        state.busy = false
100      }
101    }
102
103    const changeCurrentPage = async (currentPage: number) => {
104      store.commit('users/setCurrentPage', currentPage)
105      await search()
106    }
107
108    const changeContext = async (ctx: Ctx) => {
109      store.commit('users/setContext', ctx)
110      await search()
111    }
112
113    // NOTE: ページネーションが機能するパターン。
114    onMounted(async () => await search())
115
116    // NOTE: ページネーションが機能しないパターン。
117    // useFetch(async () => await search())
118
119    return {
120      state,
121      fields,
122      search,
123      changeCurrentPage,
124      changeContext,
125    }
126  },
127})
128</script>

store/users

typescript
1export default interface State {
2  perPage?: any
3  currentPage?: Number
4  sortBy?: String
5  sortDesc?: Boolean
6}
7
8export const state = () => ({
9  perPage: 50,
10  // TODO: refresh時リセットされるので保持しても意味がない。
11  currentPage: 1,
12  sortBy: 'id',
13  sortDesc: true,
14})
15
16export const mutations = {
17  setCurrentPage(state: State, currentPage: number) {
18    state.currentPage = currentPage
19  },
20  setContext(state: State, params: State) {
21    if (params.perPage > 0) {
22      state.perPage = params.perPage
23    }
24    state.currentPage = params.currentPage
25    state.sortBy = params.sortBy
26    state.sortDesc = params.sortDesc
27  },
28}

教えていただきたい事

上のソースコードはざっくり言うとページネーションのついた一覧リストです。

NOTE:と書かれている部分が気になっているところで、onMountedを使った場合はページネーションが機能し、useFetchを使った際はページネーションが機能しない(描画に反映されない)のです。
両方とも初期表示は問題なく、ページネーションのボタンを押した時もデータは取得してくれます。
要はuseFetchもきちんとデータまでは取れてるものの、そのデータを画面に反映してくれないのです。

これはどういう理由でこのように違うのかが知りたいです。

よろしくお願いします。