模板无法捕捉到计算属性的内容，但生命周期钩子可以正常记录-PHP中文网问答

我正在创建一个网店，在这里您可以选择在不干扰购物车内容的情况下订购产品。我实现的方式是共享一个页面，用于购物车项目和单个产品。它会检查是否设置了productID参数，如果是，则使用不同的数据。

这是我编写的函数：

    computed : {
        products: function() {
            if ( this.$route.query.pid ) {
                var product = [{}]
                axios.get(`/api/products/${this.pid}`).then(response => {
                    product[0].id = response.data[0].id
                    product[0].name = response.data[0].name
                    product[0].units = response.data[0].units
                    product[0].image = response.data[0].product_image[0].image
                    product[0].price = response.data[0].price
                    product[0].quantity = 1
                })
                return Object.assign(product)
            } else {
                return this.$store.state.cart
            }
        }
    },

这是成功获取数据的生命周期钩子（beforeMount）：

    beforeMount() {
        console.log(this.products)
    }

现在的问题是，模板中将products属性视为空。当我不带查询参数访问该页面时，一切正常，只是无法找到单个产品的计算数据。

如何解决这个问题？提前感谢您的帮助！