Componentes de Precio Fijo y Variable en Vue y Astro

ProductPriceField.vue

<template>
      <div class="col-span-full">
        <label for="price" class="block text-sm/6 font-medium text-gray-900">
          Precio del Producto:
        </label>
        <div class="mt-2">
          <input
            id="price"
            name="price"
            type="number"
            class="w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
          />
        </div>
      </div>
</template>

VariablePriceFields.vue

<template>
        <div class="col-span-full " v-for="(size, index) in store.sizes" :key="index">
               <label :for="index" class="block text-sm/6 font-medium text-gray-900">
                     <span class="font-bold">  Precio Tamaño: </span> {{ size.size }}
                </label>
                <div class="mt-2">
                        <input 
                                :id="index"
                                :name="index"
                                :value="size.price"
                                type="number"
                                class="w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" 
                        />
                </div>
        </div>
</template>