Vue.js x Rails　コンポーネントからアクションを参照出来ない Cannot read property 'dispatch' of undefined"

前提・実現したいこと

BookInfoコンポーネントのonclickメソッド実行する時のエラーを解決したい

下記エラーが発生している原因を知りたいです。
BookInfoコンポーネントのonclickメソッド実行時に下記エラーが発生してしまいます。
どなたか解決方法分かる方見えましたらご教授頂きたく思います。

そのた必要な情報あれば、コメント頂ければと思います。

発生している問題・エラーメッセージ

Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"

TypeError: Cannot read property 'dispatch' of undefined

該当のソースコード

##store.js

vue
1import Vue from 'vue'
2import Vuex from 'vuex'
3import createPersistedState from 'vuex-persistedstate'
4import { UPDATE_CURRENT} from './mutation-types'
5
6Vue.use(Vuex)
7
8export default new Vuex.Store({
9  state: {
10    current: null 
11  },
12  getters:{ 
13    current(state){ //現在編集中の書籍
14      return state.current
15    }
16  },
17  mutations:{
18    [UPDATE_CURRENT](state, payload){ //編集中の書籍(current)を更新
19      state.current = payload
20    },
21  },
22  actions:{ 
23    [UPDATE_CURRENT]({ commit }, payload){
24      commit(UPDATE_CURRENT,payload)
25    },
26  },
27})

##main.js

import Vue from 'vue/dist/vue.esm.js'
// import Vue from 'vue'
import Router from './router/routerbook'
import store from './store.js'
import './plugins/element.js'
import BookInfo from './components/book/BookInfo.vue'


Vue.config.productionTip = false

//httpプロパティを追加
Vue.prototype.$http = (url,opts) => fetch(url,opts)

var app = new Vue({
  el: '#app2',
  router: Router,
  store: store,
  components:{
    BookInfo
  },
})

##BookInfo.vue

<template>
  <div class="clearfix" :class="{ linkable }" @click="onclick">
    <div class="image"><img :src="book.image" /></div>
      <div class="details">
        <ul>
          <li v-if="index">{{ index }}.</li>
          <li>タイトル:{{book.title}} </li>
          <li>作者{{book.author}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { UPDATE_CURRENT } from './mutation-types'

export default {
  name: 'book-info',
  props: {
    index: { type: Number },
    linkable: { type: Boolean, default: false },
    book: { type: Object }
  },
  methods: {
    ...mapActions([UPDATE_CURRENT]),
    onclick() {
      this[UPDATE_CURRENT](this.book) 
      this.$router.push('/form')
    }
  }
}
</script>