buttonタグで勝手にリロードされてしまう(vue.js)

formをひとつだけ用意して、それぞれどのボタンを押されたかで挙動を変更するためボタンにv-on:clickを設定したところ
画面が勝手にリロードされハマりました。

(laravelのbladeテンプレート内でVueを使用)

<form id="item-form">
	<select v-on:change="addCondition($event, 'operator_name')">
	    <option v-for="member in members">
	        @{{member.name}}
	    </option>
	</select>
    <button id="search_button" v-on:click="search">検索</button>
    <button id="delete_button" v-on:click="deleteItem($event, item)">削除</button>

    <ul id="show-list">
		<li v-if="search_condition !== null" v-for="val in search_condition">
			@{{ val }}
		</li>
	</ul>
</form>


@section('script')
<script>

var vm = new Vue({
	el: '#item-form',
	data: {
		members: {!! json_encode($members) !!},
		search_condition: [],
	},
	methods: {
		 addCondition: function(event, type, cond="="){
			 console.log(event);
            if(event.target.value == ""){
                vm.search_condition.pop();
            }else{
            	vm.search_condition.push(event.target.value);
            }
        },
		search: function(){
			alert('検索する');
			console.log(this.search_condition);
		},
		deleteItem: function(){
			alert('削除する');
			console.log(this.search_condition);
		}
	},

});
</script>

alertを出したあと一旦console.logするだけにしたのですが
なぜか画面がリロードされてしまう。。。（URLの最後に?がつくのでget通信しようとしているようにみえる）

##原因:type属性が設定されていないbuttonタグは、type=submitを付与しているときと同じ動作をします。
しらなかった。。。。

ドキュメント( https://developer.mozilla.org/ja/docs/Web/HTML/Element/button )より以下抜粋
・form属性この属性を指定しない場合は、祖先に <form> 要素が存在すれば、その要素に関連付けられます。
・type属性submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。

###解決方法1: buttonタグじゃなくてinputタグのtype=buttonにする

<input type="button" v-on:click="search" value="検索">

###解決方法2: buttonタグのままtype=buttonを追加

<button type="button" v-on:click="search">検索</button>

###解決方法3: イベント修飾子.preventを使う

<button v-on:click.prevent="search">検索</button>

####参考:
https://stackoverflow.com/questions/44681646/the-page-will-strangely-refresh-when-i-click-the-button