Pinia getters are not reactive

Question

I have defined a store as below:

export const useCartStore = defineStore('cartStore', {

state: () => {
    let cart = null
    let url: string = "cart/"
    return { cart, url }
},

actions: {
    async list(){
        let cart_cookie = cookie().get_cookie("cart")
        let c: { items: CartItem[] } = {items: []}
        
        if (cart_cookie) {
            await cart_cookie.items.forEach(async (item: CartItem) => {
                let product = await gateway().get("products/" + item.product + "/")
                c.items.push({product: product, quantity: item.quantity})
            });
            this.cart = c
        }
    },
    
 
},

getters: {

    quantity(state) {
        if (state.cart) {
            return state.cart.items.reduce((sum, item) => sum + item.quantity, 0);
        }
        return 0;
    }
}})

Which simply tracks user cart for an ecommerce website. when I use quantity getter in a component like below (simplified):

<script lang="ts">
export default {

    data() {
        const cart_store = useCartStore()
        return { cart_store }
    },
}
</script>

<template>
{{ cart_store.quantity }}
</template>

After calling useCartStore.list(), quantity's value displayed in the component remains zero and there is no reactivity. How can I make this getter reactive?