How to trigger $onAction with funtionally defined store

[Coldsewoo]

Hello, I'm currently in process of migration from vuex v4.
I want to keep the existing mutation-action separated structure so defined store with functional method as below.
refered this example

// useGlobalStore.ts
import { defineStore } from 'pinia'
import { tabList, GlobalMutationTypes } from './types/global'
import { reactive } from 'vue'
import type { GlobalStateType } from './types/global'

const useGlobalStore = defineStore('global', () => {
  const state = reactive<GlobalStateType>({
    tab: tabList['site'],
    prevTab: 'site',
    query: {},
  })

  const mutations = {
    [GlobalMutationTypes.SET_TAB](payload: string) {
      if (state.tab.key !== payload) {
        state.prevTab = state.tab.key
      }
      state.tab = {
        ...tabList[payload],
      }
    },
    [GlobalMutationTypes.TOGGLE_PREV_TAB]() {
      const prevTab = state.tab.key
      state.tab = {
        ...tabList[state.prevTab],
      }
      state.prevTab = prevTab
    },
    [GlobalMutationTypes.SET_QUERY](query: Record<string, any>) {
      state.query = query
    },
  }

  return {
    state,
    getters: {},
    commit: mutations,
    dispatch: {},
  }
})

export default useGlobalStore

// TestPage.vue
<template>
  <button
    v-for="(tab, key) in tabList"
    :key="key"
    @click="globalStore.commit.SET_TAB(tab.key)"
  >
    {{ tab.name }}
  </button>
  <button @click="() => globalStore.commit.TOGGLE_PREV_TAB()">prev</button>

  <InnerComponent />
</template>

<script setup lang="ts">
import { useGlobalStore } from '/Store/index'
import { tabList } from '/Store/types/global'

import InnerComponent from '/Components/InnerComponent.vue'

const globalStore = useGlobalStore()
</script>

// InnerComponent.vue
<template>
  <div>{{ globalStore.state.tab }}</div>
</template>
<script lang="ts" setup>
import { useGlobalStore } from '/Store/index'
const globalStore = useGlobalStore()
</script>
<style lang="scss" scoped></style>

It seems the overall logic works well with this structure, but $onAction does not trigger when commit or dispatch called.

// PiniaPlugin.ts
import type { PiniaPluginContext } from 'pinia'
import _cloneDeep from 'lodash.clonedeep'

export const PiniaPlugin = () => (ctx: PiniaPluginContext) => {
  console.log(ctx)

  ctx.store.$subscribe(() => {
    console.log('State changed')
    console.log(_cloneDeep(ctx.store.$state))
  })

  ctx.store.$onAction(() => {
    console.log('on Action')
  })
}

How can I let the context know the functions in mutation or dispatch is action in pinia?