formのsubmitとvueのクリックイベントが同時に発火してしまいます。

前提・実現したいこと

調べてみたのですが対応方法がわからないので質問させていただきます。

Laravel8とVue3開発をしています。HistryEdit.vueの<button @click="deleteHistry(key)">削除する</button>をクリックすると外側のbladeのformごと送信されてしまいます。

ご存知の方いましたら教えていただけますと幸いです。

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

php
1{{ Form::open(['url' => 'info/' . Auth::id() . '/edit', 'class' => 'contnets__right']) }}
2
3        {{ Form::token() }}
4
5        //省略
6
7        <h2 class="contentss__left__list__title">職歴</h2>
8        <histry-edit :initial-histries="{{$user_histories_encoded}}"></histry-edit>
9
10        //省略
11
12        {{Form::submit('送信', ['class'=>'submit'])}}
13
14        {{Form::close()}}

HistryEdit.vue

vue
1<template>
2    <div>
3        <ul>
4            <li v-for="(histry, key) in histries" :key="key">
5                <p>
6                    <input
7                        :name="'histries[' + key + '][start_year]'"
8                        type="number"
9                        :value="histry.start_year"
10                        :max="year"
11                        :min="year - 100"
12                    />
13                    ~
14                    <input
15                        :name="'histries[' + key + '][quit_year]'"
16                        type="number"
17                        :value="histry.quit_year"
18                        :max="year"
19                        :min="year - 100"
20                    />
21                </p>
22                <input
23                    :name="'histries[' + key + '][name]'"
24                    type="text"
25                    :value="histry.name"
26                />
27                <input
28                    :name="'histries[' + key + '][role]'"
29                    type="text"
30                    :value="histry.role"
31                />
32                <textarea
33                    :name="'histries[' + key + '][body]'"
34                    id=""
35                    :value="histry.body"
36                ></textarea>
37                <button @click="deleteHistry(key)">削除する</button>//問題の箇所
38            </li>
39        </ul>
40        <button >項目を追加する</button>
41    </div>
42</template>
43
44<script>
45var currentTime = new Date();
46
47export default {
48    props: {
49        initialHistries: {
50            type: Array,
51        },
52    },
53    data() {
54        return {
55            histries: this.initialHistries,
56            year: currentTime.getFullYear(),
57        };
58    },
59    deleteHistry(key) {
60        this.histries.splice(key, 1);
61    },
62};
63</script>

試したこと

<button type="button" @click="deleteHistry(key)">削除する</button>
とするとformも動かないのですがクリックイベントも発火しませんでした。

補足情報（FW/ツールのバージョンなど）

laravel8
vue3

行動規範の内容に同意します

回答1件

自己解決

methodsの中に入っていませんでした。不注意でした。
今後は気をつけようと思います。

vue
1methods: {
2        deleteHistry(key) {
3            this.histries.splice(key, 1);
4        },
5        addHistry() {
6            this.histries.push([]);
7        },
8    },