Apply CSS conditionally in a loop – VueJS

I have a JSON list of items that I import in my vue component,
I loop though that file in order to show them. Each item belong to a specific ‘group’ :

See IMG

E.g. :

{
"type": "Simple list",
"title": "Simple list",
"id": 1,
"group": "list-component",
"properties": "lorem lipsum"
},

I would like to apply a CSS ‘border-top-color’ to each item according to its group.

I was trying to make a JS method but I’m not sure how to achieve that. Here’s my atempt.

The template (I’m using VueDraggable, don’t mind it) :

          <div class="item drag" :key="element" :style="[{ 'border-top-color': 'brdrTpClr' }]">
            {{ element.title }}
            <div class="addico" :key="index">
              <i class="fas fa-add"@click="$emit('pushNewElt', element.id)"></i>
            </div>
          </div>

The script :

data() {
    return {
      dragItems: dragItemsList,
      brdrTpClr: "",
    };
  },
  mounted() {
    for (let i = 0; i <= 15; i++) {
      if (this.dragItems[i].group == "list-component") {
         // I'm not sure how to do it
        // the color I want to apply : #00A3A1b
      } else if (this.dragItems[i].group == "location-media-component") {
        // #005EB8
      } else if (this.dragItems[i].group == "container-component") {
        // #0091DA
      } else if (this.dragItems[i].group == "UI-component") {
        // #6D2077
      } else if (this.dragItems[i].group == "reader-scanner-component") {
        // #470A68
      }
    }
  },

I’m using i<=15 instead of i<=this.dragItems.length because of a bug, don’t mind it too.