title: Vue.js cannot read property of null/undefined of nested object in Props
body: <p>So i get an object from an axios call. I pass the object to a child element. Then in that child element i loop through the object to read a property of another nested object. and here i get the warning that the property i'm trying to read undefined/null. i did check the console and i'm receiving everthing properly the problem is in reading that nested property.
  The Error</p>
  <pre><code>TypeError: Cannot read property 'username' of null
  </code></pre>
  <p>The object i receive looks like the following</p>
  <pre><code>{
      &quot;images&quot;: [
          &quot;1616575030315IMG-20210211-WA0003.jpg&quot;,
          &quot;1616575030316IMG-20210211-WA0004.jpg&quot;,
          &quot;1616575030316IMG-20210211-WA0000.jpg&quot;
      ],
      &quot;_id&quot;: &quot;605afa36320a772cecc4ed85&quot;,
      &quot;name&quot;: &quot;Maman&quot;,
      &quot;brand&quot;: &quot;Zara&quot;,
      &quot;user&quot;: {
          &quot;email&quot;: [
              &quot;zakisb97@gmail.com&quot;
          ],
          &quot;_id&quot;: &quot;6061bd38ada425383cc8a5b2&quot;,
          &quot;username&quot;: &quot;zakisb97&quot;,
          &quot;tel&quot;: &quot;0560728063&quot;,
          &quot;apropos&quot;: &quot;salam123456&quot;,
      },
      &quot;type&quot;: &quot;Robes&quot;,
      &quot;size&quot;: &quot;M&quot;,
      &quot;description&quot;: &quot;Good to wear&quot;,
      &quot;price&quot;: &quot;150&quot;,
  }
  </code></pre>
  <p>Parent component: Market Products</p>
  <pre><code>    &lt;div
          v-for=&quot;product in products&quot;
          class=&quot;&quot;
          :key=&quot;product.id&quot;
      &gt;
          &lt;product-default :product=&quot;product&quot;  /&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The product default child component</p>
  <pre><code>&lt;h1&gt;{{ product.user.username }}&lt;/h1&gt; // results in undefined
  
  export default {
      props: {
          product: {
              type: Object,
              require: true,
              default: () =&gt; {}
          },
      },
     data: () =&gt; ({
         // nothing here
      }),
    
  }
  </code></pre>