关于vue中使用js原生onclick事件第一次点击不生效的问题（第二次才开始生效）

问题是这样的，我要实现的是点击不同的div这个div的border就变成蓝色，其他的不变色，我就用最原始的oncllick事件，利用排他思想，当我点击的时候清除其他div的样式，只给当前div的border赋值，代码如下

clickOne() {
      let div = document.querySelectorAll('.epdiv');
      for (let i = 0; i < div.length; i++) {
        div[i].addEventListener('click', function () {
          document.querySelector('.borderBlue').classList.remove('borderBlue');
          this.classList.add('borderBlue');
        })
      }
      this.classifyName = "接得通";
      this.pieThreeList = [['无线原因', 109], ['终端原因', 86], ['网元原因', 56], ['用户原因', 33]];
      this.dimension = 4;
      this.dataType = 1001,
        this.getThres();
    },
    clickTwo() {
      debugger
      let div = document.querySelectorAll('.epdiv');
      for (let i = 0; i < div.length; i++) {
        div[i].addEventListener('click', function () {
          debugger
          document.querySelector('.borderBlue').classList.remove('borderBlue');
          this.classList.add('borderBlue');
        })
      }
      this.classifyName = "通得快";
      this.pieThreeList = [['无线原因', 34], ['终端原因', 76], ['网元原因', 88], ['用户原因', 99]];
      this.dimension = 32;
      this.dataType = 1002;
      this.getThres();
    },
    clickThree() {
      let div = document.querySelectorAll('.epdiv');
      for (let i = 0; i < div.length; i++) {
        div[i].addEventListener('click', function () {
          document.querySelector('.borderBlue').classList.remove('borderBlue');
          this.classList.add('borderBlue');
        })
      }
      this.classifyName = "听得清";
      this.pieThreeList = [['无线原因', 88], ['终端原因', 132], ['网元原因', 98], ['用户原因', 112]];
      this.dimension = 32;
      this.dataType = 1003;
      this.getThres();
    },
    clickFour() {
      let div = document.querySelectorAll('.epdiv');
      for (let i = 0; i < div.length; i++) {
        div[i].addEventListener('click', function () {
          document.querySelector('.borderBlue').classList.remove('borderBlue');
          this.classList.add('borderBlue');
        })
      }
      this.classifyName = "不掉话";
      this.pieThreeList = [['无线原因', 77], ['终端原因', 99], ['网元原因', 128], ['用户原因', 108]];
      this.dimension = 32;
      this.dataType = 1004;
      this.getThres();
    },

但是出现了一个问题，就是当我第一次点击的时候不生效，只有第二次开始才有我想要的效果，于是百度了一下，看到有人解释说需要在mounted当中注册点击事件，这样点击的时候第一次才会生效

于是就在mounted当中加入了clickOne()函数，问题解决！