Vue3 время обновления DOM, как вывести стили в зависимости от изменения реактивного состояния

как решить такую проблему, есть итерация по массиву, массив получает длину 1 или 2 на каждый цикл итерации в зависимости от условия изменяется реактивное состояние, состояние хранит стили(styleObject), мне надо вывести разное состояние, например если было 2 итерации значит вывести 2 разных состояния(стиля) в два div, с длиной массива 1 проблемы нет, с длиной 2 проблема в том что всегда выводится последнее состояние, и divы получают один и тот же стиль хотя реактивное состояние отслеживается computed. Пример:

<script setup
// .....
// .....
// .....

const styleObject = reactive({
  color: '',
  'background-image': '',
  'background-color': '',
})

// types = ["Ground", "Water"]
function getType(types) {
  types.forEach((name) => {
    const typePok = store.typeWeakness.find(item => name === item.name)

    if (typePok.name === 'Ground') {
      styleObject['background-image'] = 'linear-gradient(#53A4CF 50%, #F16E57 50%)'
      styleObject['background-color'] = typePok.color
      styleObject.color = typePok.textColor
    }
    else if (typePok.name === 'Dragon') {
      styleObject['background-image'] = 'linear-gradient(#53A4CF 50%, #F16E57 50%)'
      styleObject['background-color'] = typePok.color
      styleObject.color = typePok.textColor
    }
    else if (typePok.name === 'Flying') {
      styleObject['background-image'] = 'linear-gradient(#3DC7EF 50%, #BDB9B8 50%)'
      styleObject['background-color'] = typePok.color
      styleObject.color = typePok.textColor
    }
    else {
      styleObject['background-color'] = typePok.color
      styleObject['background-image'] = ''
      styleObject.color = typePok.textColor
    }
  })
}

const styleObjPok = computed(() => styleObject.color.length !== '' ? styleObject : {})

</script>

<template>
  <div class="flex pl-4">
    <div
      <-!-- typePoks = ["Ground", "Water"]-->
      v-for="(type, index) in typePoks"
      :key="index"
      :style="styleObjPok"
      class="rounded-sm text-[12px] px-4 mr-1"
    >
      {{ type }}
    </div>
  </div>
</template>