I mapped actions from vuex store in my parent component (Home). My parent component includes child component (Buttons). I would like to pass mapped action (decreaseAction) from parent to child. I just added the name of this action to button (in child component) as @click="decreaseAction". It doesn't work though. Sure, I could use @click="$store.dispatch('decreaseAction')" but I wanted to do it the other way, by passing action from parent. Why the action can't be passed directly from parent to child here?

Home.vue

<template>
  <div class="home">
    The App
  </div> 
  <Buttons />
</template>

<script>
import { mapActions } from 'vuex'; 
import Buttons from '@/components/Buttons.vue';

export default {
  name: 'Home',
  methods: mapActions(['decreaseAction']),
  components: {
    Buttons
  }
}
</script>

Buttons.vue

<template>
  <div class="buttons">
    <button @click="decreaseAction">Decrease</button>
    <!-- <button @click="$store.dispatch('decreaseAction')">Decrease</button>  // using $store.dispatch works fine.. -->
  </div>
</template>

<script>
export default {

}
</script>