piratezon_new/app/components/ColorPicker.vue

<template>  
  <div class="car--list--wrap" :class="titleOption ? 'title--type' : ''">
    <h3 v-if="titleOption" class="title--exterior">Exterior Colors</h3>
    <div class="thumb">
      <img :src="colors[selectedIndex].image" :alt="colors[selectedIndex].title" />
    </div>
    <div class="color--pick--contents">
      <div class="color--pick">
        <div
          v-for="(color, index) in colors"
          :key="index"
          :style="{ backgroundColor: color.colorValue , borderColor : color.colorValue }"
          :class="{ actv: selectedIndex === index }"
          @click="selectedIndex = index"
        >
          <div :style="{ backgroundColor: color.colorValue}"></div>
        </div>
      </div>
      <div class="color--info">
        <h1>Paint Color : </h1>
        <span>{{ colors[selectedIndex].title }}</span>
      </div>
    </div>
  </div>    
</template>

<script setup>
const props = defineProps({
  titleOption: {
    type: Boolean,
    default: false
  },
  colors: {
    type: Array,
    required: true
  },  
})

const selectedIndex = ref(0)
</script>