Хочу сделать интернет магазин на vue и pinia, но при добавлений товаров в коризну страница не рендерится

Всем привет, я новичок и пытаюсь сделать интернет магазин на vue, а для управления состоянием использую pinia, у меня все работает, но почему-то при добавлений товаров в корзину страница не рендерится. Но если обновить терминал, то страница тоже обновляется и товары отображаются. Но если добавить товар в моменте, в массиве он появляется, а картинка на странице нет...

прошу прощения за такое ужасное объяснение )))0

App.js

<template>
  <div id="app">
    <MainWrapper/>
  </div>
</template>

<script>
import MainWrapper from './components/MainWrapper.vue'

export default {
  name: 'App',
  components: {
    MainWrapper
  }
}
</script>

<style>

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons);
#app {
  font-family: "Roboro", sans-serif;
  text-align: center;
}

</style>

main.js

import {createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import  router  from './router/router'


createApp(App).use(createPinia()).use(router).mount('#app') 

MainWrapper.vue

<template>
  <div class="MainWrapper">
    <CatalogPage/>
    
    <CartPage 
    :cart_data="store.CART"
    />
  </div>
</template>

<script>
/* import CatalogPage from './CatalogPage.vue'
import CartPage from './CartPage.vue' */
import {useProduct} from '../pinia/store'

export default {
  name: 'MainWrapper',
  setup () {
      const store = useProduct()
      return {
            store
        }
    },
  components: {
/*     CatalogPage,
    CartPage */
  },
  props: {}
}
</script>


<style>

.MainWrapper {
    max-width: 900px;
    margin: 0 auto;
}

</style>

CatalogPage.vue

<template>
    <div class="catalogPage">

      <div class="link_to_cart">Корзина: {{ store.CART.lenght }}</div>
        
    <CatalogItem
      v-for="product in store.productComponent"
      :key="product.id"
      :product_data="product"
      @addToCart="addToCart"
    />

    </div>
</template>

<script>

import CatalogItem from './CatalogItem.vue'
import {useProduct} from '../pinia/store'


export default {
    name: 'catalogPage',
    setup () {
      const store = useProduct()

      return {
            store,
        };
    },
    components: {
        CatalogItem

    },
    methods: {
        addToCart (data) {
          this.store.SET_CART(data)
        }
    },
    computed: {}
        
}
</script>

<style>

.catalogPage {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px;
}

.link_to_cart {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 10px;
  border-radius: 25px;
  border: solid 1px #aeaeae;
}

</style>

CatalogItem.vue

<template>
    <div class="catalogItem">
     <img :src="product_data.image" class="catalog-item-image" alt="img">
      <p class="catalog-item-name">{{ product_data.name }}</p>
      <p class="catalog-item-price"> Цена: {{ product_data.price }}P</p>

    <button 
        class="catalog-item-add-to-btn btn" 
        @click="addToCart"> 
        В корзину 
    </button>

    </div>
</template>

<script>
export default {
    name: 'catalogItem',
    props: {
      product_data: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
        addToCart () {
            this.$emit('addToCart', this.product_data)
        }
    }
        
}
</script>

CartPage.vue

<template>
    <div class="cart-page">
        <h1>Корзина</h1>

    <CartItem  
      v-for="(cart, index) in store.CART"
      :key="cart.id"
      :cart_item_data="cart"
      @deleteCart = "deleteCart(index)"
    />
    </div>
</template> 

<script>

import CartItem from './CartItem.vue'
import {useProduct} from '../pinia/store'
    
export default {

    name: 'cart-page',
     setup () {
       const store = useProduct()
       return {
             store
         };
     },
    components: {
        CartItem
    },

    computed: {},
    mounted () {
    console.log(this.store.CART)
  },
     props: {
          cart_data: {
             type: Array,
              default () {
                 return []
              }
          }
      },

      methods: {
        deleteCart (index) {
            this.store.DELETE_FROM_CART(index)
        }
      }
}
</script>

<style lang="scss" scoped>

</style>

CartItem.vue

<template>
    <div class="cart-page">
        <h1>Корзина</h1>

    <CartItem  
      v-for="(cart, index) in store.CART"
      :key="cart.id"
      :cart_item_data="cart"
      @deleteCart = "deleteCart(index)"
    />
    </div>
</template> 

<script>

import CartItem from './CartItem.vue'
import {useProduct} from '../pinia/store'
    
export default {

    name: 'cart-page',
     setup () {
       const store = useProduct()
       return {
             store
         };
     },
    components: {
        CartItem
    },

    computed: {},
    mounted () {
    console.log(this.store.CART)
  },
     props: {
          cart_data: {
             type: Array,
              default () {
                 return []
              }
          }
      },

      methods: {
        deleteCart (index) {
            this.store.DELETE_FROM_CART(index)
        }
      }
}
</script>

<style lang="scss" scoped>

</style>

store.js

import { defineStore } from 'pinia'


export const useProduct = defineStore ('product', {

    state: () => {
        return {
            products: [
                {
                  id: 1,
                  name: 'Сыворотка',
                  image: 'https://cdn1.ozone.ru/s3/multimedia-z/6011528891.jpg',
                  price: 1200
                },
                {
                  id: 2,
                  name: 'Тоник для лица',
                  image: 'https://diamondelectric.ru/images/3211/3210266/tonik_mixit_1.jpg',
                  price: 900
                },
                {
                  id: 3,
                  name: 'Эссенция',
                  image: 'https://express-china.ru/upload/iblock/d88/d889b582d38ec86503a8980091659186.jpg',
                  price: 1400
                },
                {
                  id: 4,
                  name: 'Гидрофильное масло',
                  image: 'https://goodcream.ru/upload/iblock/696/vf5tkdgfrom1ead12jr9bowbjj4odvca.png',
                  price: 500
                },
                {
                  id: 5,
                  name: 'Пенка',
                  image: 'https://www.letu.ru/common/img/marketplace/eb696d3e-6fbf-4f0d-be64-7e45566f5b8d.jpg',
                  price: 800
                },
                {
                  id: 6,
                  name: 'Крем',
                  image: 'https://novosibirsk.uteka.ru/media/1024/3/b6/3b650b12626c6eafcd7bfc53f8531f3f.jpg',
                  price: 1000
                },
                {
                  id: 7,
                  name: 'Тон',
                  image: 'https://akvarel-shop.ru/images/detailed/42/103688.jpg',
                  price: 600
                },
                {
                  id: 8,
                  name: 'Тени',
                  image: 'https://www.letu.ru/common/img/uploaded/skuImageFolder/GIV080933_mainGT.jpg',
                  price: 1500
                },
                {
                  id: 9,
                  name: 'хз',
                  image: 'https://www.letu.ru/common/img/uploaded/skuImageFolder/GIV080933_mainGT.jpg',
                  price: 1350
                },
              ],
            StoreCart: []
        }

    },
  
    getters: {
        productComponent () {
            return this.products
        },

        CART() {
            return this.StoreCart
        }
    },

    actions: { 

      SET_CART(object) {
        this.StoreCart.push({...object})
      },

      DELETE_FROM_CART (index) {
        this.StoreCart.slice(index, 1)
      }
      
    },
    

})

![примерно так выглядит, но если обновить, то все исчезнет и при добавлений товары не будут отображаться]