Как сделать реактивное обновление количество товара в корзине Vue 3?

У меня есть страница корзины и там отображаются все товары в корзине из localStorage, но у меня ещё есть иконка на сайте с корзиной и возле неё отображается количество товаров в ней. Просто если я тыкаю на товаре "Добавить в корзину", то в localStorage отправляется, но реактивно не меняется количество товаров и сама корзина естественно. Приходится обновлять страницу, а это же неправильно тем более с Vue. Для меня было бы не проблемой сделать, но беда в том что эта иконка корзины находится в App.vue, а страница продуктов в Product.vue и я не знаю как динамически обновить значение с дочернего компонента в родительский. Что можно сделать? Там вроде есть метод через пропсы сделать, но у меня не получилось Код App.vue:

<li class="cartm"> <a href="#0" class="number cart-icon"> <i
                              class="flaticon-shopping-cart"></i>
                              <span class="count">({{products ? products.length : 0}})</span>
                          </a>
                          </li>
<script>
  data() {
    return {
      products: [],
      totalPrice: 0,
    }
  },
  mounted() {
    $(document).trigger('changed')
    this.getCartProducts()
  },
  methods: {
    getCartProducts(){
      if (localStorage.getItem('cart')){
        this.products = JSON.parse(localStorage.getItem('cart'));
        this.calculateCartPrice()
      }

    },
    removeCart(id){
        this.products = this.products.filter(product => {
            return product.id !== id
        })
      this.updateCart()
      this.calculateCartPrice()
    },
    updateCart(cartProducts){
      localStorage.setItem('cart', JSON.stringify(this.products))
      this.products = cartProducts
    },
    calculateCartPrice(){
      this.totalPrice = this.products.reduce((sum, product) => sum + product.price * product.qty, 0)
    }
  }

</script>

Код Product.vue:

<a @click.prevent="addToCart(product, true)" href="cart.html" class="addcart btn--primary style2">
                              Add To Cart </a>
<script>
methods: {
    addToCart(product, isSingle){
      let qty = isSingle ? 1 : $('.qtyValue').val();
      let cart = localStorage.getItem('cart');
      $('.qtyValue').val(1);

      let newProduct = [
        {
          "id": product.id,
          "image_url": product.image_url,
          "title": product.title,
          "price": product.price,
          "qty": qty
        }
      ];

      if (!cart){
        localStorage.setItem('cart', JSON.stringify(newProduct))
      }
      else{
          cart = JSON.parse(cart);
          cart.forEach(productInCart => {
            if (productInCart.id === product.id){
              productInCart.qty = Number(productInCart.qty) + Number(qty);
              newProduct = null;
            }
          })
          Array.prototype.push.apply(cart, newProduct);
          localStorage.setItem('cart', JSON.stringify(cart));
      }
      this.calculateCartPrice()
    },
</script>