title: Vue.js: Calling function on change
body: <p>I'm building a component in Vue.js. I have an input on the page where the user can request a certain credit amount. Currently, I'm trying to make a function that will log the input amount to the console, as I type it in. (Eventually, I'm going to show/hide the requested documents based on the user input. I don't want them to have to click a submit button.)</p>
  
  <p>The code below logs it when I tab/click out of the input field. Here's my component.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="col s12 m4"&gt;
        &lt;div class="card large"&gt;
          &lt;div class="card-content"&gt;
            &lt;span class="card-title"&gt;Credit Limit Request&lt;/span&gt;
            &lt;form action=""&gt;
              &lt;div class="input-field"&gt;
                &lt;input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text"&gt;
                &lt;label for="credit-limit-input"&gt;Credit Limit Amount&lt;/label&gt;
              &lt;/div&gt;
            &lt;/form&gt;
            &lt;p&gt;1. If requesting $50,000 or more, please attach Current Balance Sheet (less than 1 yr old).&lt;/p&gt;
            &lt;p&gt;2. If requesting $250,000 or more, also attach Current Income Statement and Latest Income Tax Return.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;    
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'licenserow',
    data: () =&gt; ({
      creditLimit: ""
    }),
    methods: {
      logCreditLimit: function (){
        console.log(this.creditLimit)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I change <code>methods</code> to <code>computed</code>, it works - but I get an error saying <code>Invalid handler for event: change</code> every time it logs the value.</p>