Почему в Vue.js я получаю сообщение об ошибке при попытке перехода на один файловый компонент?

Question

Я следовал за учебником здесь:

http://frankclark.xyz/veevalidate-strong-password-and-confirmation-validation

создать собственный валидатор паролей.

Я сейчас пытаюсь переместить этот код в один компонент файла.

Я создал файл с именем Password.vue и поместил HTML в <template></template> теги без проблем.

Но когда я добавляю JavaScript:

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

VeeValidate.Validator.extend('verify_password', {
    getMessage: field => `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,
    validate: value => {
        var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
        return strongRegex.test(value);
    }
});

внутри <script></script> теги, я получаю следующее сообщение об ошибке:

Uncaught TypeError: Cannot set property 'render' of undefined

Что я делаю неправильно?