Vue 3: How to conditionally apply CSS classes based on multiple reactive data properties?
I'm following best practices but I'm currently working on a Vue 3 application and I'm facing an issue with conditionally applying CSS classes based on multiple reactive data properties. My goal is to apply a specific class when both a `status` and a `isActive` boolean are true. I have the following setup: ```javascript <template> <div :class="computedClass"> Status: {{ status }} | Active: {{ isActive }} </div> </template> <script> export default { data() { return { status: 'online', isActive: false, }; }, computed: { computedClass() { return { 'bg-green': this.status === 'online' && this.isActive, 'text-white': this.isActive, }; }, }, }; </script> ``` The CSS classes `bg-green` and `text-white` should only be applied when `status` is 'online' **and** `isActive` is true. However, I'm finding that when I set `isActive` to true, the `bg-green` class does not appear unless I also update `status`. Here's the logic I tried: ```javascript this.isActive = true; this.status = 'online'; ``` But I noticed that the computed property does not reactively re-evaluate unless both values are changed together. I saw a console warning about reactivity, but I'm not sure how to resolve this without manually triggering a re-computation. Is this a known limitation in Vue 3, or am I missing something in my reactive setup? I've tried using `watch` to detect changes, but it feels like an overkill for this scenario. Any guidance on how to handle this elegantly would be greatly appreciated! For reference, this is a production microservice. Thanks for your help in advance! Could someone point me to the right documentation?