added add to cart and remove from cart buttons

src/App.vue

@@ -2,13 +2,23 @@
 import { ref } from 'vue'
 import ProductDisplay from '@/components/ProductDisplay.vue'
 
-const cart = ref(0)
+const cart = ref([])
 const premium = ref(true)
 
+const updateCart = (id) => {
+  cart.value.push(id)
+}
+const removeFromCart = (id) => {
+  const index = cart.value.indexOf(id)
+  if (index !== -1) {
+    cart.value.splice(index, 1)
+  }
+}
+
 </script>
 
 <template>
   <div class="nav-bar"></div>
-  <div class="cart">Cart({{ cart }})</div>
-  <ProductDisplay :premium="premium"></ProductDisplay>
+  <div class="cart">Cart({{ cart.length }})</div>
+  <ProductDisplay :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></ProductDisplay>
 </template>

src/components/ProductDisplay.vue

@@ -10,6 +10,8 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['add-to-cart'], ['remove-from-cart'])
+
 const product = ref('Socks')
 const brand = ref('Vue Mastery')
 
@@ -43,7 +45,13 @@ const shipping = computed(() => {
   }
 })
 
-const addToCart = () => cart.value += 1
+const addToCart = () => {
+    emit('add-to-cart', variants.value[selectedVariant.value].id)
+}
+
+const removeFromCart = () => {
+    emit('remove-from-cart', variants.value[selectedVariant.value].id)
+}
 
 const updateVariant = (index) => {
   selectedVariant.value = index
@@ -80,6 +88,12 @@ const updateVariant = (index) => {
         >
           Add to cart
         </button>
+        <button
+            class="button"
+            v-on:click="removeFromCart"
+        >
+            Remove
+        </button>
       </div>
     </div>
   </div>