I am learning vue3 and am using typescript for it. Is there a way to pass in the state and behavior from the root of the application.

// main.ts
const app = createApp(App, {
    cart: 0,
    imagePath: "/src/assets/images/socks_blue.png",
    product: "Socks",
    description: "Some description",
    details: ["50% cotton", "30% wool", "20% polyester"],
    variants: [
        { id: 2235, color: 'green' },
        { id: 2234, color: 'blue' },
    ],
    sizes: ['S', 'M', 'L', 'XL', 'XXL'],
    stockStatus: true,
    onSale: false,
    // addToCart: () => { cart += 1 } doesn't work.
});

app.mount("#app");

and then access the state and behavior in App.

// App.vue
<div class="product-display">
    <div class="product-container">
      <div class="product-image">
        <ImageDisplay :imagePath=imagePath />
      </div>
      <div class="product-info">
        <ProductDisplay 
        :product=product 
        :description=description
        :details=details
        :variants=variants
        :sizes=sizes
        :stockStatus=stockStatus
        :onSale=onSale />
        <button class="button">Add to Cart</button>
      </div>
    </div>
  </div>

The default state is passed to App and can be accessed without any issue but not sure how to pass in the methods from main.ts to App.vue and use it there when the button is clicked.

Still learning so not sure if this the right way to pass default state around and update it.