在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

我在做什么错了？