scope.$refs.validty.validate()

[mkdesignn]

hello I'm using elixir to compile my project. I have installed vue-validator and use it like below

import Vue from 'vue';
import validtor from 'vue-validator';
Vue.use(validtor);

new Vue({
    data: {
        style: { margin: 0, padding: 0 },
        validation: { result: {} },
        events: []
    },
    methods: {
        handleValid: function () {
            console.log("hello world");
            this.handleValidationEvent('valid')
        },
        handleInvalid: function () {
            this.handleValidationEvent('invalid')
        },
        handleTouched: function () {
            this.handleValidationEvent('touched')
        },
        handleDirty: function () {
            this.handleValidationEvent('dirty')
        },
        handleModified: function (e) {
            this.handleValidationEvent('modified')
        },
        handleValidationEvent: function (event) {
            console.log("hello world");
            this.events.push({
                timestamp: new Date().getTime(),
                type: event
            })
            this.events.sort(function (a, b) {
                return a.timestamp > b.timestamp ? -1 : 1
            })
        }
    }
}).$mount('#app');

And my HTML code

<div id="app">
    <label for="username">username:</label>
    <validity field="username"
              ref="validity"
              v-model="validation"
              :validators="{ required: true, minlength: 4 }"
              @valid="handleValid"
              @invalid="handleInvalid"
              @touched="handleTouched"
              @dirty="handleDirty"
              @modified="handleModified">
        <input type="text" @input="$refs.validity.validate()">
    </validity>
    <p>validation errors:</p>
    <div class="errors">
        <p v-if="validation.result.required">required username!!</p>
        <p v-if="validation.result.minlength">too short username!!</p>
    </div>
    <p>validation events:</p>
    <div class="events">
        <p :style="style" :data-event="event.type" v-for="event in events">{{event.timestamp}}: {{event.type}}</p>
    </div>

After typing into text box I can only see the error Cannot read property 'validate' of undefined I really don't know what's the problem and how to fix it. thx for any help.