Element-UI的跑马灯 prev 和next 方法怎么使用

mounted () {
    document.querySelector('.welcome').addEventListener('wheel', (e) => {
      console.log(e.wheelDelta)
      if (e.wheelDelta < 0) {
        this.next()
      } else {
        this.prev()
      }
    })
  },
  methods: {
    prev () {
      this.$refs.nop.prev();
    },
    next () {
      this.$refs.nop.next();
    },

  },

<template>
        <el-carousel height="100vh"
                     trigger='click'
                     direction="vertical"
                     :autoplay="false">

          <el-carousel-item class="welcome-item"
                            ref="nop">
0
          </el-carousel-item>

          <el-carousel-item class="welcome-item">
1
          </el-carousel-item>
          <el-carousel-item class="welcome-item">
2
          </el-carousel-item>
          <el-carousel-item class="welcome-item">
            3
          </el-carousel-item>
        </el-carousel>

      </template>

错误

直接在标签上使用也是这样

ref="nop"放错位置了，要放在el-carousel 上面