title: Vuejs: Character Counter
body: <p>I am trying to create a "twitter-like" character counter using Vuejs; however, I am encountering two separate issues.</p>
  
  <ol>
  <li>Error:  Unable to get property 'length' of undefined or null reference</li>
  <li>Even if I get it to work, is there any way to call the same function using multiple events without adding each one as a separate call to the tag.  Ex: v-on:keyup,blur,focus="limiter(this,140)"</li>
  </ol>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="form-group" id="vue"&gt;
    &lt;label for="eligibility-address-detail"&gt;Address Notes:&lt;/label&gt;
    &lt;textarea class="form-control" id="eligibility-address-detail" rows="3" 
     name="eligibility[address][detail]" v-model="eligibility.address.details" 
     v-on:keyup="limiter(this, 140)" required&gt;&lt;/textarea&gt;
    &lt;span class="limiter"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var main = new Vue({
    el: "#vue",
    data: {
      eligibility: {
        address: {
          details: ""
        }
      }       
    },
    methods: {        
        limit: function(elem, limit){
            var chars = elem.value.length;
            if (chars &gt; limit) {
                elem.value = elem.value.substr(0, limit);
                chars = limit;
            }
            $(elem).siblings('.limiter').html((limit - chars) + " / " + limit + "characters remaining");
        }
    }
  });
  </code></pre>