Javascript Can'；t访问Vue JS 3中的子对象

我是VueJS的新手，遇到了以下问题：

我有一个模板，点击一个按钮就可以通过

路由器加载一个新模板

模板：

<template>
    <div>
        {{ content.description }} // Works fine
        {{ content.subobject.logo }} // Logo not found
    </div>
</template>

然后我在方法中有一个函数，它使用这个ID通过
axios/get
获取数据：

    methods: {
        getContent: function() {
            axios.get("https://api-url.com/" + this.ID)
            .then((response) => {
                this.content = response.data.data
                console.log(response);
            }).catch(error => {
                console.log("ERRR:: ", error.response.data)
            });            
        }

    },

此函数在以下情况下调用：

    mounted: function() {
        this.getContent()
    }

我的数据功能：

    data: function() {
    return {
       ID: '',
       content: [] as any
    }

API返回的数据如下所示：

title: "this is the title"
description: "Lorem Ipsum"
subobject: {
   logo: "Logo URL"
}

当我在模板中使用
{{content.title}
或
{{content.description}}
时，它会显示良好。只要我使用{{content.subobject.logo}}，我就会得到一个错误“logo”找不到

有趣的是，当我打开模板并添加
{{{content.subobject.logo}}
页面加载后，保存它，然后重新热加载，它会很好地显示出来

第一次加载时数据似乎不“可用”——但如果
{{content.title}
工作正常，这怎么可能

谢谢你的建议
 数据最初不可用，这意味着
内容
仍然没有内部字段值，以避免添加条件渲染，如：

<div v-if="content.subobject">{{ content.subobject.logo }}</div>


{{content.subobject.logo}
{{content.title}
请共享您的渲染文件所在的模板logo@BoussadjraBrahim没有什么特别的。对于测试它唯一的{{content.subobject.logo}非常感谢，现在它可以工作了！！一般问题：是否最好将每个元素都用“v-if”来表示，以确保它已加载？@sparks因为您是Vue world的新手，请尝试将重点放在Vue 2上，然后您将熟悉它您可以了解Vue 3中引入的新概念
<div v-if="content.subobject">{{ content.subobject.logo }}</div>

  data: function() {
    return {
       ID: '',
       content: null
    }
}

<template>
    <template v-if="content">
            <div >{{ content.subobject.logo }}</div>
            <div >{{ content.title }}</div>
    </template>

</template>