Nuxtのメソッドが参照できない

前提・実現したいこと

Vuetifyのv-btnをクリックした際にvueのmethodsを起動したい。

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

[Vue warn]: Property or method "destroy" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

該当のソースコード

Nuxt
1<template>
2  <v-container fluid grid-list-lg>
3    <v-row justify="center">
4      <FlashMessage />
5      <v-col>
6        <v-card>
7          <v-toolbar dark color="primary">
8            <v-toolbar-title>アイテム管理</v-toolbar-title>
9          </v-toolbar>
10          <v-card-actions>
11            <v-spacer />
12            <v-btn
13              right
14              dark
15              color="primary"
16              :to="url.operator.create"
17            >
18              新規作成
19            </v-btn>
20          </v-card-actions>
21          <v-data-table
22            :headers="headers"
23            :items="item_array"
24            :page.sync="page"
25            hide-default-footer
26            class="elevation-1"
27            @page-count="pageCount = $event"
28          >
29            <template #item.actions="{ item }">
30              <v-btn
31                color="primary"
32                dark
33                :to="url.operator.edit.path(item.id)"
34              >
35                編集
36              </v-btn>
37              <v-btn
38                color="primary"
39                dark
40                @click="destroy"
41              >
42                削除
43              </v-btn>
44            </template>
45          </v-data-table>
46          <v-pagination
47            v-model="page"
48            :length="pageCount"
49          />
50          <ConfirmDialog ref="confirm_dialog" />
51        </v-card>
52      </v-col>
53    </v-row>
54  </v-container>
55</template>
56
57<script>
58import { mapGetters, mapActions } from 'vuex'
59import ConfirmDialog from '~/components/atoms/popup/ConfirmDialog'
60import FlashMessage from '~/components/atoms/popup/FlashMessage'
61import Link from '~/mixins/link'
62
63export default {
64  components: {
65    ConfirmDialog,
66    FlashMessage
67  },
68
69  mixins: [Link],
70
71  asyncData: async ({ store }) => {
72    const items = await store.dispatch('repositories/items/fetch')
73  },
74
75  data: () => ({
76    page: 1,
77    pageCount: 0,
78    itemsPerPage: 10,
79    defaultHeaders: [
80      {
81        text: 'アイテム名',
82        align: 'start',
83        sortable: false,
84        value: 'id'
85      },
86      {
87        text: '説明',
88        align: 'start',
89        sortable: false,
90        value: 'description'
91
92      },
93      {
94        text: '',
95        align: 'right',
96        sortable: false,
97        value: 'actions'
98      }
99    ],
100    headers: []
101  }),
102
103  computed: {
104    ...mapGetters('repositories/items', {
105      item_array: 'get_to_array'
106    })
107  },
108
109  mounted () {
110    this.headers = _.cloneDeep(this.defaultHeaders)
111  },
112
113  method: {
114    ...mapActions('state/flash_message', {
115      show_flash_message: 'show',
116      clear_flash_message: 'clear'
117    }),
118
119    ...mapActions('repositories/operatorid', {
120      delete_operate_id: 'eliminate'
121    }),
122
123    async destroy () {
124      if (await this.$refs.confirm_dialog.open(
125        '削除しますか?',
126        '',
127        {
128          height: 20,
129          width: 500
130        }
131      )) {
132        try {
133          await this.delete_operate_id()
134          this.show_flash_message('削除が完了しました。')
135        } catch (e) {
136          this.show_flash_message('削除に失敗しました。')
137          console.error(e)
138        }
139      }
140    }
141  }
142}
143</script>