Vue.jsのv-modelが使用されているフォームにイベント処理を追加したい場合

Vue.jsでv-model記述に関わる部分を触った際の備忘録になります。
間違っているところや、もっと良い方法などあったら教えていただけると助かります。

`v-model`はVue.jsを使ってフォームを構築する際によく使う機能で、`v-on`と`v-bind`をまとめて一行で書くためのシュガーシンタックスです。

`v-model`を使った際の展開のされ方は以下の通り。
| フォームの種類 | v-bind: | v-on: |
|:-----------|:-----------|:-----------|
| テキストボックス、テキストエリア | value | input |
| チェックボックス、ラジオボタン | checked | change |
| セレクトボックス | value | change |

`v-model`はイベントハンドリングそのものを兼ねているため、`v-model`が既に記述されているフォームに対して入力（選択）内容が変更された時にイベントを発火させようと`@change`や`@input`を記述すると、イベントが重複してしまいます。
もし`change`や`input`イベントで単なる代入以上の処理をしたい場合は、2通りの方法があります。

1.`v-model`を使用せず、`v-bind`と`v-on`を別々に書く
2.算出プロパティを使う

例として、下記の動作を実装した各方法での記述を記載します。
1.セレクトボックスの「選択肢2」を選択した際に、その下の`input`が2つ格納されているdivを非表示にし、非表示にした`input`に対して指定の値を代入する。
2.セレクトボックスの「選択肢2」ではないものを選択した際に、その下の`input`が2つ格納されているdivを再表示し、`input`の中に指定の値が入っていた場合、値をクリアにする。

```html:v-modelを使用せず、v-bindとv-onを別々に書く場合
<div id="form_vue_wrap" v-cloak>
	<div>
		<select name="select_aaa" id="form-select_aaa" @change="change_aaa()">
			<option value="">選択してください</option>
			<option value="01">選択肢1</option>
			<option value="02">選択肢2</option>
			<option value="03">選択肢3</option>
		</select>
	</div>
	<div v-show="select_aaa != '02'">
		<input type="text" name="input_bbb" id="input_bbb" v-model="$v.input_bbb.$model">
		<input type="text" name="input_ccc" id="input_ccc" v-model="$v.input_ccc.$model">
	</div>
</div>
<script>
	form_vue = new Vue({
		el: '#form_vue_wrap',
		data: {
			select_aaa: '',
			input_bbb: '',
			input_ccc: ''
		},
		methods: {
			change_aaa: function(){
				var val = $('#form-select_aaa').val();
				this.select_aaa = val;
				if (this.select_aaa == '02'){
					this.input_bbb = 'dummy-bbb';
					$('#input_bbb').val('dummy-bbb');
					this.input_ccc = 'dummy-ccc';
					$('#input_ccc').val('dummy-ccc');
				} else {
					if (this.input_bbb == 'dummy-bbb' && this.input_CCC == 'dummy-ccc'){
						this.input_bbb = '';
						$('#input_bbb').val('');
						this.input_ccc = '';
						$('#input_ccc').val('');
					}
				}
			}
		}
	});
</script>
```

```html:算出プロパティを使う場合
<div id="form_vue_wrap" v-cloak>
	<div>
		<select name="select_aaa" id="form-select_aaa" v-model="select_aaa_change">
			<option value="">選択してください</option>
			<option value="01">選択肢1</option>
			<option value="02">選択肢2</option>
			<option value="03">選択肢3</option>
		</select>
	</div>
	<div v-show="select_aaa != '02'">
		<input type="text" name="input_bbb" id="input_bbb" v-model="$v.input_bbb.$model">
		<input type="text" name="input_ccc" id="input_ccc" v-model="$v.input_ccc.$model">
	</div>
</div>
<script>
	form_vue = new Vue({
		el: '#form_vue_wrap',
		data: {
			select_aaa: '',
			input_bbb: '',
			input_ccc: ''
		},
		computed: {
			select_aaa_change : {
				get() {
					return this.select_aaa
				},
				set(value) {
					this.select_aaa = value;
					if (this.select_aaa == '02'){
						this.input_bbb = 'dummy-bbb';
						$('#input_bbb').val('dummy-bbb');
						this.input_ccc = 'dummy-ccc';
						$('#input_ccc').val('dummy-ccc');
					} else {
						if (this.input_bbb == 'dummy-bbb' && this.input_CCC == 'dummy-ccc'){
							this.input_bbb = '';
							$('#input_bbb').val('');
							this.input_ccc = '';
							$('#input_ccc').val('');
						}
					}
				}
			}
		}
	});
</script>
```