ughghghgh how to put in cart

app/src/components/GroceryCart.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <h1>Cart</h1>
+    </div>
+</template>
+
+<script setup>
+cart = [];
+</script>
+
+<style scoped>
+
+</style>

app/src/components/ProductCss.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
           <h2 class="card">{{ product.name }} <br> {{ product.cost }}</h2>
+          <slot></slot>
     </div>
 </template>
 

app/src/components/ShopProduce.vue

@@ -1,14 +1,13 @@
 <template>
     <div>
       <div class="container">
-          <ProductCss @click="ordered = ordered" v-for="product in products" :key="product.name" :product = "product"/>
+          <ProductCss @click="console.log(product)" v-for="product in products" :key="product.name" :product = "product">Add to Cart</ProductCss>
       </div>
-      <h1 v-if="ordered">hi</h1>
     </div>
 </template>
 
 <script setup>
-import HomeView from '../components/HomeView.vue'
+import cart from '../components/GroceryCart.vue'
 import ProductCss from '../components/ProductCss.vue'
 const products  = [
   {name: "Broccoli (per lb)",

app/src/views/HomeView.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
-    <h1>Cart</h1>
+    <GroceryCart/>
   </div>
 </template>
 
 <script setup>
+import GroceryCart from '../components/GroceryCart.vue'
 </script>
 
 <style scoped>