Vue.js: вызов функции при изменении

Я создаю компонент в Vue.js. У меня есть вход на странице, где пользователь может запросить определенную сумму кредита. В настоящее время я пытаюсь создать функцию, которая будет регистрировать сумму ввода на консоли, когда я ее ввешу. (В конце концов, я собираюсь показать/скрыть запрошенные документы на основе ввода пользователя. попросите их нажать кнопку отправки.)

Приведенный ниже код регистрирует его, когда я нажимаю/выхожу из поля ввода. Вот мой компонент.vue:

<template>
    <div class="col s12 m4">
      <div class="card large">
        <div class="card-content">
          <span class="card-title">Credit Limit Request</span>
          <form action="">
            <div class="input-field">
              <input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text">
              <label for="credit-limit-input">Credit Limit Amount</label>
            </div>
          </form>
          <p>1. If requesting $50,000 or more, please attach Current Balance Sheet (less than 1 yr old).</p>
          <p>2. If requesting $250,000 or more, also attach Current Income Statement and Latest Income Tax Return.</p>
        </div>
      </div>    
    </div>
  </div>
</template>

<script>
export default {
  name: 'licenserow',
  data: () => ({
    creditLimit: ""
  }),
  methods: {
    logCreditLimit: function (){
      console.log(this.creditLimit)
    }
  }
}
</script>

Если я меняю methods на computed, он работает, но я получаю сообщение об ошибке " Invalid handler for event: change каждый раз, когда он регистрирует значение".