I'm quite new with Vue and Vuex, so I'm just doing a simple counter to grasp the basics from Vuex. The problem I'm having right now is that the increment function which is defined in mutation's Store is not working on the Counter component, and I don'tn understand why. Here's the code: store:

import { createStore } from 'vuex'

export default createStore({
  state: {    
    counterVal: 0,
  },
  mutations: {
    addToCounter(state, payload){
      state.counterVal = state.counterVal + payload;
    }
  },
actions:{
}  
})

component:

<template>
    <div>
        <h1>Vuex Counter</h1>
        <h1 class="counter">{{ counterVal }}</h1>
        <button class="button">-</button>
        <input 
          class="input"
          v-model="inputVal"
          type="number" />
        <button
         class="button"
         @click="addToCounter(inputVal)"
         >
           +
         </button>

    </div>
</template>


<script>
import { ref, computed } from 'vue'
import { mapState, mapMutations ,useStore } from 'vuex';

  export default {
    setup() {
      const store = useStore()

      const inputVal = ref(1);


        return{
          counterVal: computed(() => store.state.counterVal), 
          addToCounter: computed(() => store.commit.addToCounter),
          inputVal,
          }
        },
        /* computed: {
          ...mapState(['counterVal'])
        } */
    }
</script>

Here's the console output: