Added compute and is product is on sale

src/App.vue

@@ -1,26 +1,43 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import socksGreenImage from './assets/images/socks_green.jpeg'
 import socksBlueImage from './assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
 const brand = ref('Vue Mastery')
 
-const image = ref(socksGreenImage)
-const inStock = ref(false)
+const selectedVariant = ref(0)
 
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
 
 const variants = ref([
-  { id: 2234, color: 'green', image: socksGreenImage },
-  { id: 2235, color: 'blue', image: socksBlueImage },
+  { id: 2234, color: 'green', image: socksGreenImage, quantity: 50, onSale: true },
+  { id: 2235, color: 'blue', image: socksBlueImage, quantity: 0, onSale: false },
 ])
 
 const cart = ref(0)
 
+const title = computed(() => {
+  return brand.value + ' ' + product.value
+})
+
+const image = computed(() => {
+  return variants.value[selectedVariant.value].image
+})
+
+const inStock = computed(() => {
+  return variants.value[selectedVariant.value].quantity > 0
+})
+
+const onSales = computed(() => {
+  if (variants.value[selectedVariant.value].onSale) return brand.value + ' ' + product.value + ' is on sale'
+})
+
 const addToCart = () => cart.value += 1
 
-const updateImage = (variantImage) => image.value = variantImage
+const updateVariant = (index) => {
+  selectedVariant.value = index
+}
 
 </script>
 
@@ -33,16 +50,17 @@ const updateImage = (variantImage) => image.value = variantImage
         <img v-bind:src="image">
       </div>
       <div class="product-info">
-        <h1>{{ product }}</h1>
+        <h1>{{ title }}</h1>
         <p v-if="inStock">In Stock</p>
         <p v-else>Out of Stock</p>
+        <p v-if="onSales">{{ onSales }}</p>
         <ul>
           <li v-for="detail in details">{{ detail }}</li>
         </ul>
         <div 
-          v-for="variant in variants" 
+          v-for="(variant, index) in variants" 
           :key="variant.id"
-          @mouseover="updateImage(variant.image)"
+          @mouseover="updateVariant(index)"
           class="color-circle"
           :style="{ backgroundColor: variant.color }"
         >