[Vuejs]-Independant isActive states for groups of element plus buttons

You can create array of objects for each button group.
Then loop them in template to display buttons and on button click loop that button group and set active to true only for clicked button, also set other buttons in group to false.

It would look something like this:

<template>
  <div>
    <div class="dateNav">
      <el-button-group>
        <el-button
          v-for="(d, i) in dateNav"
          :key="i"
          :type="d.active ? 'success' : 'danger'"
          plain
          @click="setActive(d.name, 'dateNav')"
        >{{d.name}}</el-button>
      </el-button-group>
    </div>
    <br/>
    <div class="dtFilter">
      <el-button-group>
        <el-button
          v-for="(d, i) in dtFilter"
          :key="i"
          :type="d.active ? 'success' : 'danger'"
          plain
          @click="setActive(d.name, 'dtFilter')"
        >{{d.name}}</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateNav: [
        {
          name: 'Days',
          active: true
        },
        {
          name: 'Lates',
          active: false
        },
        {
          name: 'Nights',
          active: false
        }
      ],
      dtFilter: [
        {
          name: 'Unconfirmed',
          active: true
        },
        {
          name: 'Confirmed',
          active: false
        },
        {
          name: 'All',
          active: false
        }
      ]
    };
  },
  methods: {
    setActive(name, group) {
      this[group].forEach(d => {
        (name === d.name) ? d.active = true : d.active = false
      })
    }
  }
};
</script>

Full preview here