vue2 点击切换视频vedio

尝试了很多方法,vedio.js等等
都不能达到我的要求,不能实现切换视频

预期效果

点击上一段,下一段 ,切换视频

实现方法

template部分
绑定动态src

  <!-- 视频  -->
                <div id="pop_video" class="pop_video">
                  <video
                    id="video-id"
                    :src="videoUrl"
                    width="100%"
                    height="100%"
                    controls
                  ></video>
                </div>
                <!-- 切换 -->
                <div class="flex qiehuan">
                  <div class="up up_down-css" @click="change_vedio($event)">
                    上一段
                  </div>
                  <div class="down up_down-css" @click="change_vedio($event)">
                    下一段
                  </div>

script部分
require 导入视频url

export default {
  data() {
    return {
      videoUrl: require('../assets/监控1.mp4'),
    },
    methods: {
    //切换视频
    change_vedio(e) {
      //获取当前元素
      let target = e.currentTarget.innerHTML
      if (target.includes('上一段')) {
        this.videoUrl = require('../assets/监控1.mp4')
      } else {
        this.videoUrl = require('../assets/监控2.mp4')
      }
    },
    }