swiper渲染总是报错

home/index.vue
<template>
  <div class="home">
    <header class="g-header-container">
      <home-header/>
    </header>
    <div>
      <home-slider/>
    </div>
    <div class="g-backtop-container"></div>
<!--    <router-view></router-view>-->
  </div>
</template>

<script>
  import HomeHeader from './header';
  import HomeSlider from './slider';

  export default {
    name: 'Home',
    components: {
      HomeHeader,
      HomeSlider
    }
  };
</script>

<style lang="scss" scoped>
  @import "~assets/scss/mixins";

  .home {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: $bgc-theme;
  }
</style>

home/slider.vue
<template>
  <div class="slider-wrapper">
    <me-slider
      :direction="direction"
      :loop="loop"
      :interval="interval"
      :pagination="pagination"
    >
      <swiper-slide
        v-for="(item,index) in sliders"
        :key="index"
      >
        <a :href="item.linkUrl" class="slider-link">
          <img :src="item.picUrl" class="slider-img">
        </a>
      </swiper-slide>
    </me-slider>
  </div>
</template>

<script>
  import MeSlider from 'base/slider';
  import {swiperSlide} from 'vue-awesome-swiper';
  import {sliderOptions} from './config';

  export default {
    name: 'HomeSlider',
    components: {
      MeSlider,
      swiperSlide
    },
    data() {
      return {
        direction: sliderOptions.direction,
        loop: sliderOptions.loop,
        interval: sliderOptions.interval,
        pagination: sliderOptions.pagination,
        sliders: [
          {
            'linkUrl': 'https://www.imooc.com',
            'picUrl': require('./1.jpg')
          },
          {
            'linkUrl': 'https://www.imooc.com',
            'picUrl': require('./2.jpg')
          },
          {
            'linkUrl': 'https://www.imooc.com',
            'picUrl': require('./3.jpg')
          }, {
            'linkUrl': 'https://www.imooc.com',
            'picUrl': require('./4.jpg')
          }
        ]
      };
    }
  };
</script>

<style lang="scss" scoped>
  .slider-wrapper{
    width: 100%;
    height: 183px;
  }
</style>

base/slider/index.vue
<template>
  <swiper :options="swiperOption">
    <slot></slot>
    <div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  import {swiper} from 'vue-awesome-swiper';

  export default {
    name: 'MeSlider',
    components: {
      swiper
    },
    props: {
      direction: {
        type: String,
        default: 'horizontal',
        validator(value) {
          return [
            'hotizontal',
            'vertical'
          ].indexOf(value) > -1;
        }
      },
      interval: {
        type: Number,
        default: 3000,
        validator(value) {
          return value >= 0;
        }
      },
      loop: {
        type: Boolean,
        default: true
      },
      pagination: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        swiperOption: {
          watchOverflow: true, // 只有1个slide时，就不轮播
          direction: this.direction,
          autoplay: this.interval ? {
            delay: this.interval,
            disableOnInteraction: false // 与轮播有交互时，暂停轮播
          } : false,
          slidesPerView: 1, // 设置slider容器同时显示几张slide
          loop: this.loop,
          pagination: {
            el: this.pagination ? '.swiper-pagination' : null
          }
        }
      };
    }
  };
</script>

<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 100%;
  }

  .slider-link {
    display: block;
  }

  .slider-link,
  .slider-img {
    width: 100%;
    height: 100%;
  }
</style>

找了半天也不知道为啥，一个提示direction有问题，一个提示swiper注册问题，一个提示swiper-slide注册问题，但是对比视频里的和下载的源码都差不多啊，就是出问题

vue.runtime.esm.js?439f:619 [Vue warn]: Invalid prop: custom validator check failed for prop "direction".

found in

---> <MeSlider> at src/base/slider/index.vue

       <HomeSlider> at src/pages/home/slider.vue

         <Home> at src/pages/home/index.vue

           <App> at src/App.vue

             <Root>

vue.runtime.esm.js?439f:619 [Vue warn]: Unknown custom element: <swiper> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <MeSlider> at src/base/slider/index.vue

       <HomeSlider> at src/pages/home/slider.vue

         <Home> at src/pages/home/index.vue

           <App> at src/App.vue

             <Root>