I have problem that promo is not passing to this component so when i run my project as products catalog(Vue.js) app error Promo is not defined

The problem that the type PromotionalSpot is not passing throw the parent component since in PromotionalSpot.vue the type “promo” is not defined (Error from browser)

index.vue

<template>
    <div class="bg-gray-100 min-h-screen">
      <MainMenu />
      <div class="flex">
        <SidebarMenu />
        <div class="flex-1 p-6">
          <div class="grid grid-cols-4 gap-4 mb-6">
            <PromotionalSpot
            v-for="promo in promotionalSpots"
            :key="promo.position"
            :promo="promo"  
          />
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <ProductCard v-for="product in products" :key="product.id" :product="product" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { useProductData } from '~/composables/useProductData';
  import MainMenu from '~/components/MainMenu.vue';
  import SidebarMenu from '~/components/SidebarMenu.vue';
  import ProductCard from '~/components/ProductCard.vue';
  import PromotionalSpot from '~/components/PromotionalSpot.vue';
  

  const { products, promotionalSpots } = useProductData();
  </script>

This is promotionalSpots component

<template>
    <div :class="spotClasses" class="relative">
      <a :href="promo?.link" v-if="promo?.link">
        <img :src="promo?.image?.imageUrl" :alt="promo?.image?.alt || 'Promotional Image'" class="w-full h-full object-cover" />
      </a>
      <p v-else>No promotional image available</p>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  defineProps({
    promo: {
      type: Object,
      required: true,
    },
  });
  
  console.log(promo);

  const spotClasses = computed(() => {
    const type = promo?.type;  
  
    console.log(type);  
  
    if (type === '2x2') return 'col-span-2 row-span-2';
    if (type === '2x1') return 'col-span-2';
    if (type === '1x1') return '';
    return ''; 
  });
  </script>