vue application best practice/pattern to display data with people-friendly label?

A high-level vue application question:

A little background:

• small team, still learning vue
• creating a new large reasonably complex vue app from scratch
• vue-cli scaffolded (vue 2, veux, router, i118n, bootstrapVue)
• there are many different application entities – e.g. "user", “product”, etc.
• there are many of each item, and each has a data record (from a db) that includes a number of boolean fields such as "active", “enabled”, “is_sensitive”.
• item data displays in many different contexts, including: search results, table lists (e.g. browse), individual landing views for each (an item detail page), as well as ancillary lists (e.g. “A related item:”

The key problem:
In every display situation, the boolean values should to be translated from machine-friendly to people-friendly terminology.

The appropriate human-friendly term depends on the field itself (so there is no single translation for all fields).

Example: Machine-friendly data:

[
    {
        name: “Megaphone”,
        is_embarrassing: false,
        active: false,
    },
    {
        name: “Wankel Rotary Engine”,
        is_embarrassing: true,
        active: true,
    },
]

Human-friendly list:

+----------------------+----------+---------------------+
| Name                 | Active?  | Embarrassing?       |
+----------------------+----------+---------------------+
| Megaphone            | Inactive | Not embarassing     |
| Wankel Rotary Engine | Active   | Item is Embarassing |
+----------------------+----------+---------------------+

The key question:
What is the best way to solve this in a scalable, efficient, elegant, sensible way?

I have thought of a couple of options…neither of these feel scalable nor elegant, and are brittle.

(1) sequence of in-line v-if conditions within the component view template

    <p v-if=“item.property.is_embarrassing">
        Item is Embarrassing
    </p>
    <p v-else>
        Not embarassing
    </p>

(2) computed properties in the component

    <p>
        
    </p>

    detailsPropertyEmbarrassing() {
        return item.property.is_embarrassing ? “Item is Embarrassing : “Not Embarrassing”;
    },

I have also been noodling over the idea of some sort of Map that is imported along with the data and used to get the right labels, but I haven’t completely worked that out yet.

What is a solution for transforming data fields to people-friendly labels across an entire application, for a variety of different display situations?

(Side note: I may also need to transform the field in other ways, such as truncating length…)

And is there a way to establish this globally in the app in a manner that is scalable, both technically and organizationally, so that new components can display as desired, near-automatically?

This seems like a basic fundamental need in any app of size, not just vue, so I feel like this has been/has to have been solved before, but either I cannot find the right research keywords or am missing something obvious.

Thanks in advance!