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

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

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

Что я делаю не так?