manage field via vue and checkbox

inputs.html

<div style="clear: both;"></div><br/>
					<div class="control-group" id="enabledNotificationGroup">
						<label class="control-label" for="enabledNotification">Enable Email Notification:</label>
						<div class="controls">
							<input type="checkbox" class="form-control input-xxlarge" th:field="*{enabledNotification}" id="enabledNotification" v-model="isEnabled" v-on:click="eraseValue" />
							<span class="help-inline">
								<span th:each="err : ${#fields.errors('enabledNotification')}" th:text="${err}"></span>
							</span>
						</div>
					</div>
					<div style="clear: both;"></div><br/>
					<div class="control-group" id="notificationEmailGroup">
						<label class="control-label" for="notificationEmail">Notification Email:</label>
						<div class="controls">
							<input type="text" class="form-control input-xxlarge" th:field="*{notificationEmail}" id="notificationEmail" :disabled="!isEnabled" v-model="inputValue" />
							<span class="help-inline">
								<span th:each="err : ${#fields.errors('notificationEmail')}" th:text="${err}"></span>
							</span>
						</div>
					</div>

vue_controller.js

var vue = new Vue({
		el : '#acerUserForm',
		data : {
			isEnabled : /*[[${userModel.enabledNotification}]]*/true,
			inputValue : /*[[${userModel.notificationEmail}]]*/''
		},
		methods : {
			eraseValue : function() {
				if (!this.isEnabled) {
					this.inputValue = '';
				}
			}
		}
	});