Vue.js directive: delay execute

directive-delay-execute.js

var Vue = require('vue');

Vue.directive('delay-execute', {
    acceptStatement: true,
    bind: function () {
        this._delayRunTimeout = parseInt(this.arg, 10) || 1000;
    },
    update: function (handle) {
        this.reset();
        this._delayRunTimer = setTimeout(handle, this._delayRunTimeout);
    },
    reset: function () {
        clearTimeout(this._delayRunTimer);
    },
    unbind: function () {
        this.reset();
    }
});

usage.vue

<template>
    <!-- This demo shows you an easy way to delay 5 seconds to hide the message. -->
    <!-- Timer will start when message is shown, aka. `this.message` is assigned. -->
    <div v-if="message" v-delay-execute:5000="close">
        <button type="button" @click="close">x</button>
        {{ message }}
    </div>
</template>

<script>
module.exports = {
    data: function () {
        return {
            message: null
        };
    }
    methods: {
        close: function () {
            this.message = null;
        },
        show: function (msg) {
            this.message = msg;
        }
    }
};
</script>

TypeError: Cannot read property 'arg' of undefined

bind: function (el, binding) {
        this._delayRunTimeout = parseInt(binding.arg, 10) || 1000;
    }