Импорт компонента проверки дает синтаксическую ошибку

Question

Я храню электронные письма в массиве 'emailsDB' и пытаюсь проверить, существует ли в массиве электронная почта, введенная пользователем в поле ввода электронной почты.

Точные шаги, которые я выполнил, приведены здесь - https://www.npmjs.com/package/vee-validate

Тем не менее, при реализации я получаю сообщение об ошибке в консоли:

SyntaxError: объявления импорта могут появляться только на верхнем уровне модуль

HTML код

<div id="updateName" class="wrapper wrapper-right">
                <div class="wrapper-inner full-height">
                    <!--Contact Sec-->
                    <section>
                        <!--form sec-->
                        <section class="animated container-fluid align-center sec-ptop">
                            <h3 class="salutation">
                                Hey <span v-if='formData.Name.length'>{{formData.Name}}</span> <span v-else>There</span>, happy to hear from you.
                            </h3>
                            <div>
                                <form v-on:submit.prevent="validateBeforeSubmit" name="contactform" method="post" class="row form-horizontal" role="form" novalidate="true">
                                    <div class="form-group input--josh col-6">
                                        <div class="input-wrap">
                                            <input autocomplete="off" type="text" v-model="formData.Name" v-validate="'required'" id="Name" name="Name" placeholder="Name" class="form-control input__field input input__field--josh" :class="{'input': true, 'is-danger': errors.has('Name') }" />
                                            <i v-show="errors.has('Name')" class="fa fa-exclamation"></i>
                                            <label for="Name" class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Name')" class="help is-danger">{{ errors.first('Name') }}</span>
                                    </div>
                                    <div class="form-group  input--josh col-6">
                                        <div class="input-wrap">
                                            <input autocomplete="off" type="email" v-model="formData.Email" v-validate="'required|email'" id="Email" name="Email" placeholder="Email" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Email') }">
                                            <i v-show="errors.has('Email')" class="fa fa-exclamation"></i>
                                            <label for="Email" class="input__label input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Email')" class="help is-danger">{{ errors.first('Email') }}</span>
                                    </div>
                                    <div class="form-group  input--josh col-12">
                                        <div class="input-wrap">
                                            <textarea rows="4" v-model="formData.Message" v-validate="'required'" id="Message" name="Message" placeholder="message" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Message') }"></textarea>
                                            <i v-show="errors.has('Message')" class="fa fa-exclamation"></i>
                                            <label for="Message" class="input__label input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Message')" class="help is-danger">{{ errors.first('Message') }}</span>
                                    </div>
                                    <div class="form-group col-12">
                                        <div class="align-center">
                                            <button type="submit" class="btn btn-default" data-ng-disabled="submitButtonDisabled">
                                                <span class="mask"></span>
                                                send
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                    </section>
                    <!--/Contact Sec-->
                </div>
            </div>

Код Vue

Vue.use(VeeValidate);
import { ValidationProvider } from 'vee-validate';
Vue.config.productionTip = false;
Vue.component('ValidationProvider', ValidationProvider);
const emailsDB = ["viveks.nair1988@gmail.com"];

var app = new Vue({
    el: '#updateName',
    mounted() {
        const isUnique = value =>
            new Promise(resolve => {
                setTimeout(() => {
                    if (emailsDB.indexOf(value) === -1) {
                        return resolve({
                            valid: true
                        });
                    }
                    return resolve({
                        valid: false,
                        data: {
                            message: `${value} has already reached out to me!`
                        }
                    });
                }, 200);
            });
        Validator.extend("unique", {
            validate: isUnique,
            getMessage: (field, params, data) => data.message
        });
    }
})

Рабочий пример - https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fbackend&module=%2Fsrc%2Fcomponents%2FBackend.vue

Изображение того, каким должен быть результат: