我有一个子组件，它接收一些属性来决定状态：

export interface IProps {
    selected?: boolean,
    answered?: boolean
  }
  const {selected, answered} = defineProps<IProps>()

根据回答/选择不同的样式需要应用。我尝试使用计算函数：

//  in template
  <div :class="cardClasses" />

// in setup script
  const classes = {
    base: "w-40 h-20 m-0 rounded-xl drop-shadow-lg flex justify-center items-center text-white text-shadow",
    default: "bg-primary hover:bg-primary/70 hover:ring-2 hover:ring-primary hover:ring-inset cursor-pointer",
    selected: "bg-primary/70 ring-teal-900 ring-2 ring-inset cursor-pointer",
    done: "bg-primary/40"
  }

  const status = computed(() => {
    if(answered) return "done"
    if(selected) return "selected"
    return "default"
  })
  const cardClasses = computed(() => `${classes.base} ${classes[status.value]}`)

状态的初始值始终为“default”，但在单击子组件后，它应变为“selected”。
状态由父组件保持，但我检查了onUpdated中selected的值更改：

onUpdated(() => {
    console.log("updated")
    console.log(selected, status)
  })

选定更改为true，但状态仍为“默认”。
我该怎么做呢？