[Vuejs]-How can I use a computed property to change the color of a text pill depending on the word using vue composition api?

Use computed properties for things like changing reactive variable output. For example, some different date format.

The best way to your issue is:

<template>
   <span class="fload ..." :class="[ dashboard.status === 'Production' ? 'status-production' : 'status-qa']">{{ dashboard.status }}</span>
</template>

Make sure dashboard is a reactive object/value like ref() or reactive() second one fit best for objects. Objects are tricky to use every time you have to assign a full new object instead of just change a value in it.

Computed property:

<template>
    <div>
        <span class="float ..." :class="addClass">{{ dashboard.status }}</span>
        <button @click="dashboard = { ...dashboard, status: 'lol' }">Change</button>
        <button @click="dashboard = { ...dashboard, status: 'Production' }">Production</button>
    </div>
</template>

<script setup>
const dashboard = ref({ status: 'Production' })

const addClass = computed(() => dashboard.value.status === 'Production' ? 'status-production' : 'status-qa')
</script>

If you use ref() and change dashboard like "dashboard.value.status = ‘some value’" reactivity won’t work same as "dashboard.status = ‘some value’" in template. You will always need to assign a new object to trigger reactivity.

reactive() don’t have that problem because all items inside of it are reactive.

When you have two class attributes, the second one gets ignored. Combine your two class attributes into one;

<div>
    <span :class="`float-left text-center w-24 inline-block flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-medium text-white inset-x-0 top-0 ${reportStatus}`">
        {{ dashboards.status }}
    </span>
</div>

Your code should work fine, Just for a demo purpose I am using just an object for dashbaords variable but you can change it to an array as per your requirement.

Here is the live demo (Please have a look and try to find the root cause of the issue you are facing by referring this) :

const { ref, computed, onMounted } = Vue;

let options = {
  setup: function () {
    let dashboards = ref({});

    const reportStatus = computed(function() {
      return (dashboards.value.status === 'Production') ? 'status--production' : 'status--qa'
    });

    onMounted(function() {
      dashboards.value = {
        report: "Ad Hoc",
        description: "",
        status: "Production"
      }
    });

    return {
      dashboards,
      reportStatus
    };
  }
};

let appVue = Vue
.createApp(options)
.mount('#app');

.status--production {
  background-color: blue;
  color: white;
  border: 1px solid black;
}

.status--qa {
  background-color: green;
  color: white;
  border: 1px solid black;
}

<script src="https://unpkg.com/vue@3.0.0-beta.14/dist/vue.global.js"></script>

<div id="app">
    <span :class="reportStatus">
      {{ dashboards.status }}
    </span>
</div>