vue + firestore: how to bind / merge data with vuefire?

I have a cloud firestore with data structured this way:

baskets

    basket 1
        basketID
        userID
        description
        products
            productID
            productID
    basket 2
        basketID
        userID
        description
        products
            productID
            productID
    ...
    basket N

products

    product A
        productID
        description
        productImg
        price
    product B
        productID
        description
        productImg
        price
    ...
    product Z

This structure in order to avoid duplicating detailed product data inside each basket document.

I created a vue component to display at once both the basket data and the products data associated to the basket, while trying to limit and optimize firebase queries. I have sucessfully binded the basket data like this:

  data() {
    return {
      basket: [],
      basket_products: []
    };
  },
  created() {
    this.$bind('basket', db.collection("baskets").where("basketID", "==", this.basketID))
  }

However I'm struggling to bind the basket_products data for the current basket. I'm looking for something like this:

    this.$bind('basket_products', db.collection("products").where("productID", 'in', ONE OF THE PRODUCT_IDS WITHIN CURRENT BASKET, EQUIVALENT TO this.basket[0].products))

Glad my pointer helped!

Just for completeness sake - the best solution as mentioned is to simply store references, vuefire automatically picks up on those and saves them accordingly as part of the baskets thanks to the maxRefsDepth option.

Aside from that, you could potentially play around with the serialize option of vuefire to modify (and query additional) data when getting the baskets.

But this would be fairly complex, you might be better off just manually subscribing using the firebase SDK instead.