Vue JS - How to cancel active class on button click

I have a list of people when clicking on them is marked with a red border, I also have two buttons, I want to make it so that when one of these buttons is pressed, the red border disappears, that is, cancel the active class, since when one of these people is clicked, it is activated a class named selectAvatarBorder

You can also see the given code in codesandbox

<template>
  <div>
    <div class="avatars-mob-container">
      <div class="avatars-container">
        <div class="av-row">
          <div
            v-for="(chunk, index) in Math.ceil(usersGroup.length / 2)"
            :key="index"
          >
            <div
              v-for="(user, index) in usersGroup.slice(
                (chunk - 1) * 2,
                chunk * 2
              )"
              :key="index"
              class="avatar-columns"
              :class="{ selectAvatarBorder: selectedUsers === user.id }"
              @click="setUserBorderColor(user.id)"
            >
              <div>
                <img width="100" height="100" :src="user.img" alt="avatar" />
              </div>
              <div>
                <p class="avatar-name">{{ user.name }} {{ index }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="users-btn-group">
        <div style="margin-right: 10px">
          <button
            :class="{
              firstBtnMobUsersColor: state === 1,
              secondBtnMobUsersColor: state === 2,
            }"
            @click="setState(1)"
          >
            Other
          </button>
        </div>
        <div>
          <button
            :class="{
              firstBtnMobUsersColor: state === 2,
              secondBtnMobUsersColor: state === 1,
            }"
            @click="setState(2)"
          >
            Open to All
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    setState(s) {
      this.state = s;
    },
    setUserBorderColor(s) {
      this.selectedUsers = s;
    },
  },
  data() {
    return {
      state: 0,
      selectedUsers: 0,

      usersGroup: [
        {
          id: 1,
          name: "American Indian",
          img:
            "http://astragem.com/static/images/ClickSearchComponent/users/1.png",
        },
        {
          id: 2,
          name: "Black/African Descent",
          img:
            "http://astragem.com/static/images/ClickSearchComponent/users/2.png",
        },
        {
          id: 3,
          name: "Hispanic/Latino",
          img:
            "http://astragem.com/static/images/ClickSearchComponent/users/3.png",
        },
        {
          id: 4,
          name: "White Caucasian",
          img:
            "http://astragem.com/static/images/ClickSearchComponent/users/4.png",
        },
      ],
    };
  },
};
</script>

<style scoped>
.selectAvatarBorder {
  border: 2px solid #CC003D !important;
  border-radius: 16px;
}

.firstBtnMobUsersColor {
  background: #CC003D !important;
  color: white !important;
}

.secondBtnMobUsersColor {
  background: white !important;
  color: red !important;
}

</style>