L9 solution

components/ProductDetails.js

@@ -0,0 +1,17 @@
+// solution
+app.component('product-details', {
+  props: {
+    details: {
+      type: Array,
+      required: true
+    }
+  },
+  template:
+  /*html*/
+  `
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+  `
+})
+// solution

components/ProductDisplay.js

@@ -14,9 +14,10 @@ app.component('product-display', {
         <p v-else>Out of Stock</p>
 
         <p>Shipping: {{ shipping }}</p>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
+        
+        <!-- solution -->
+        <product-details :details="details"></product-details>
+        <!-- solution -->
 
         <div 
           v-for="(variant, index) in variants" 
@@ -50,7 +51,7 @@ app.component('product-display', {
   },
   methods: {
       addToCart() {
-          this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
+          this.cart += 1
       },
       updateVariant(index) {
           this.selectedVariant = index

index.html

@@ -21,6 +21,9 @@
 
     <!-- Import Components -->
     <script src="./components/ProductDisplay.js"></script>
+    <!-- solution -->
+    <script src="./components/ProductDetails.js"></script>
+    <!-- solution -->
 
     <!-- Mount App -->
     <script>

main.js

@@ -5,9 +5,5 @@ const app = Vue.createApp({
             premium: true
         }
     },
-    methods: {
-        updateCart(id) {
-            this.cart.push(id)
-        }
-    }
+    methods: {}
 })