vue.js - 在 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

我究竟做错了什么？