How to resolve unknown mutation type error in Vuex with Vue3?

Question

I am using Vue3.

So I have a vuex store defined,

import { createStore } from 'vuex'
import Vuex from 'vuex'

const mod = createStore({
    namespaced: true,
    state: {
        mutations: {
            update() {
                console.log("update module")
            }
        }
    }
})

const store = new Vuex.Store({
    modules: {
        mod
    },
    mutations: {
        update() {
            console.log("update main")
        }
    }
})
export default store

From my app I want to trigger mutations in the mod module

I tried this,

<template>
  <v-btn @click="update">update</v-btn>
</template>
 
<script>
export default {
   name: 'App',
   props: {
       idx: Number
   },
   data() {
       return {
       }
   },
   methods: {
       update() {
           this.$store.commit("update")
           this.$store.commit("mod/update")
       }
   }
}
</script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

The this.$store.commit("update") is supposed to call the update mutation in the main store. The this.$store.commit("mod/update") is supposed to call the update mutation in the module mod.

I have also set namespaced to true.

Yet, when I try this, the update method gets triggered properly in the main store, but shows en error saying [vuex] unknown mutation type: mod/update while triggering the mutation in the module. What could possibly be the issue?