Vue.js 更改时(change)调用函数

我正在Vue中构建一个组件.js.我在页面上有一个输入，用户可以在其中请求一定的信用额度.目前，我正在try 创建一个函数，在输入时将输入量记录到控制台.(最终，我将根据用户输入显示/隐藏请求的文档.我不希望他们必须单击提交按钮.)

下面的代码在我点击输入字段时记录.这是我的部件.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.