Props reactivness lost

[andreadisaro]

Hi, if you define a component like this:

<script setup>
import { ref } from 'vue'
const valid = ref(false)
</script>

<template>
  <div
    class="rounded justify-content-center d-flex"
    :class="{
      'bg-success': valid,
      'bg-danger': !valid,
    }"
    style="width: 25px; height: 25px"
  >
    <CIcon
      :icon="valid ? 'cil-check' : 'cil-x'"
      @click="valid = !valid"
      class="text-white my-auto"
    />
  </div>
</template>

You'll see that the icon won't change when you click on the icon itself, while the color (class bg-success or bg-danger) will change. I'm afraid this behaviour is something that is showing in all of the components, but I don't have an evidence of that

Thank you

edit: created an even simplier test case