title: Vue3: Displaying of nested JSON object data does not work
body: <p>i am trying to display data from a nested JSON object. The data is retrieved correctly from axios but I dont get it to be displayed.</p>
  <p>The json object looks like this:</p>
  <pre class="lang-json prettyprint-override"><code>{
          &quot;id&quot;: &quot;1&quot;,
          &quot;name&quot;: &quot;Germany&quot;,
          &quot;continent&quot;: &quot;Europe&quot;,
          &quot;president&quot;: {
              &quot;id&quot;: &quot;12&quot;,
              &quot;name&quot;: &quot;Joanna Doe&quot;,
          }
  }
  
  </code></pre>
  <p>In the vue component the data is saved in the &quot;country&quot; object.</p>
  <pre class="lang-js prettyprint-override"><code>. . .
  data() {
     country: {},
  }
  </code></pre>
  <p>If I then try to render it in vue template, I get all the data if I render following:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;{{ country }}&lt;/p&gt;
  </code></pre>
  <p>But if I do try to render the data of the nested &quot;president&quot; attribute like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;{{ country.president.name }} &lt;/p&gt;
  </code></pre>
  <p>I get following error:</p>
  <pre><code>Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
      at Proxy.&lt;anonymous&gt; (CountryDetail.vue:25)
      at renderComponentRoot (runtime-core.esm-bundler.js:1165)
      at componentEffect (runtime-core.esm-bundler.js:5184)
      at reactiveEffect (reactivity.esm-bundler.js:42)
      at effect (reactivity.esm-bundler.js:17)
      at setupRenderEffect (runtime-core.esm-bundler.js:5137)
      at mountComponent (runtime-core.esm-bundler.js:5096)
      at processComponent (runtime-core.esm-bundler.js:5054)
      at patch (runtime-core.esm-bundler.js:4660)
      at componentEffect (runtime-core.esm-bundler.js:5191)
  </code></pre>
  <p>Is there anyway how to render this nested data?</p>
  <p>Thanks!</p>