使用v-for在嵌套对象中未定义Vue.js

I'm using nuxt.js have a nested Object from a json file, however I keep getting undefined once I go a few levels in. I'm trying to get to the rrp and discounts, however they keep coming back undefined

我要么必须继续初始化我的数据，要么它会变得不确定。

Before I had the nested levels I could just initialise and empty object product:{}, but now it needs all the keys in the object or it still won't find it and come back undefined.

JSON对象

"product":[
        {
            "id":"12345",
            "title":"Basic",
            "type":"featured",
            "availability":"Ready in 3 Days",
            "specs": {
                "color":"blue",
                "type":"shirt",
                "category":"apparel"
            },
            "price":{
                "planMonthly": {
                    "rrp":"89.00",
                    "discount":"0"
                },
                "plan12Months": {
                    "rrp":"79.00",
                    "discount":"10.00"
                },
                "plan24Months": {
                    "rrp":"69.00",
                    "discount":"20.00"
                }
            }
        }
    ]

v为

<div v-for="(product) in products" :key="product.id">
        <p>
         {{product.price.planMonthly}} //shows object
         {{product.price.planMonthly.rrp}} //shows undefined
        </p>
</div>