我自己用vue做的一个小组件，同时加类名和跳转页。请老师帮忙看下问题

<template>
  <div class="sidebar">
    <ul class="sidebar-items">
      <li :class="{ focus: index == current}" @click="changeColor_Page"
        v-for="(item, index) in list"
        :key="index"
        :ref="index"
        >{{item}}
        <input type="hidden" :value="index">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'FamilySidebar',
  data () {
    return {
      current: 0,
      value: '',
      list: ['员工基本信息', '员工家庭情况', '证件情况', '生育记录',
        '就职情况', '购保情况', '公积金购买', '相关技术证书档案', '工作证件办理记录',
        '免搭伙食', '补助']
    }
  },
  methods: {
    changeColor_Page (e) {
      this.color(e)
      this.page(e)
    },
    color (e) {
      console.log('current :', this.current)
      console.log('value :', e.target.children[0].value)
      this.current = e.target.children[0].value
    },
    page (e) {
      if (e.target.innerText === '员工基本信息') {
        this.$router.push('/')
      }
      if (e.target.innerText === '员工家庭情况') {
        this.$router.push('/family')
      }
      if (e.target.innerText === '证件情况') {
        this.$router.push('/certificate')
      }
      if (e.target.innerText ==='生育记录') {
        this.$router.push('/birth')
      }
    }
  }
}
</script>

<style scoped>
  .sidebar
    position: relative
    width: 200px
    height: 840px
    background-color: #393b6b
    .sidebar-items
      display: flex
      flex-direction: column
      justify-content: space-between
      position: absolute
      left: 0
      li
        margin-left: -40px
        width: 200px
        height: 40px
        line-height: 40px
        color: #abb3ec
        padding-left: 30px
        cursor: pointer
      .focus
        background-color: #2c2c50
        padding-left: 0;
</style>

我这个功能是这样的，点击选项的时候，同时给被的  li 加上类名，然后跳转。但会出现点击两次才给加上类名，不过已经实现跳转。其余没跳转功能的选项则点击一次就加上类名。老师能说下为什么会这样吗》？还有该如何解决