How to assign class depending on props value in vue?

Question

JavaScript

Hello!
Tell me how to add a specific class depending on the props value, i.e.
there is a child component

<template lang="pug">
  ul.gender
    li
      div(id="male" @click="value = 'Мужчина'" :class="[value='Мужчина' ? 'active' : false]") 
      span {{ value }}
    li
      div(id="female" @click="value = 'Женщина'" :class="[value='Женщина' ? 'active' : false]")
      span Женщина
</template>

<script>
export default {
  props: ['value'],
}
</script>

<style lang="scss">
  .gender {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background: #ffffff;
    color: #ccc;
    li {
      display: flex;
    }
  }
  #male, #female {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2)
  } 
</style>

the value value comes to it, the
task is such that if the value value is equal to the value of the string (selection), then this string needs to be given a specific class,
I tried to set the class, but nonsense comes out