何がおきたか
とあるプロジェクトで、Vue.jsのVuetifyを使っていたのだが
諸般の事情により、Vuetifyを使わなくなったので、途中までVuetifyで組んでいたものを
通常のHTMLタグに戻す、という作業をしていた時にちょっとハマったこと。
<v-form method="get" action="">
（いろいろなForm入力要素がここに入っている）
<v-btn @click="doSend">
送信する
</v-btn>
</v-form>
(doSend はこのボタンを押した後に処理されるメソッド)
これを、以下のように書き換えた。
<form method="get" action="">
（いろいろなForm入力要素がここに入っている）
<button @click="doSend">
送信する
</button>
</form>
すると、 doSend の処理が走らなくなってしまった。
原因と修正方法
Vuetifyの v-btn 要素は、実際には以下のようにレンダリングされる。
<button data-v-******* type="button">
送信する
</button>
type="button" が付与されるのがポイント。
一方、HTML要素の <button> タグは、type属性を指定しなかった場合、デフォルトは submit になる。
そのため、先程 <button> タグに置き換えた後、doSendメソッドが動作しなかったのは
clickイベントよりもsubmitイベントが優先されたため、
formのaction要素に指定したURL（上の例では空文字だが、自分自身）へ遷移してしまったためだった。
修正としては、<button> タグに type="button" を指定すればよい。
あるいは、そもそもこの場合、JavaScriptで処理させてしまう（画面遷移させない）作りだったので
formのactionが作動しないよう、javascript:void(0)を指定する方法でもよいはず（こちらの方法は採用しなかった）。