title: Passing an entire object via props not working in Vue.js while passing a single member works
body: <p>I'm currently working on some practice code where you can fetch some detailed card data by clicking one of the displayed buttons.</p>
  <p><a href="https://i.stack.imgur.com/2xkUG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2xkUG.png" alt="before_expanding" /></a></p>
  <p><a href="https://i.stack.imgur.com/PEatT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PEatT.png" alt="after_expanding" /></a></p>
  <p>I implemented the &quot;show the detailed card info&quot; function which gets triggered when you click one of the orange buttons by the following code,</p>
  <pre><code>&lt;div v-for=&quot;(obtainedCardInfo, index) in obtainedCardsInfo&quot;&gt;
    &lt;span v-if=&quot;cardBtnChosen &amp;&amp; card.id == selectedCard &amp;&amp; obtainedCardInfo.id == selectedCard&quot;&gt;                                 
      &lt;span class=&quot;cardInfo&quot;&gt;DETAILED CARD INFO:&lt;/span&gt;  
        &lt;div class=&quot;cardInfoDisplay&quot;&gt;
          &lt;div v-for=&quot;(detailedInfo,index) in obtainedCardInfo&quot; :key=&quot;index&quot;&gt; 
            &lt;p v-if=&quot;obtainedCardInfo[index]&quot;&gt; {{index}} : {{obtainedCardInfo[index]}} &lt;/p&gt;
            &lt;p v-else&gt; {{index}} : NULL &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt; &lt;br&gt;
    &lt;/span&gt; 
  &lt;/div&gt;        
  </code></pre>
  <p>, but as the object <code>obtainedCardInfo</code> contains some other objects in it, some parts of the output are still in the form of JSON object like this.</p>
  <pre><code>DETAILED CARD INFO:
  accountId : 3917674
  
  id : 3918534
  
  customerId : 998774
  
  cardRole : MAIN
  
  cardStatus : CARD_OK
  
  truncatedCardNumber : 524804______9042
  
  cardTemplate : MC_CARD
  
  cardAddress : NULL
  
  usageLimits : [ { &quot;code&quot;: &quot;WEEKLY&quot;, &quot;values&quot;: null }, { &quot;code&quot;: &quot;DAILY&quot;, &quot;values&quot;: [ { &quot;code&quot;: &quot;ATM&quot;, &quot;singleAmount&quot;: 200, &quot;count&quot;: 3, &quot;sumAmount&quot;: 300 } ] }, { &quot;code&quot;: &quot;MONTHLY&quot;, &quot;values&quot;: [ { &quot;code&quot;: &quot;ATM&quot;, &quot;singleAmount&quot;: null, &quot;count&quot;: 1000, &quot;sumAmount&quot;: 1000000 } ] } ]
  
  expiration : { &quot;year&quot;: 2022, &quot;month&quot;: 6 }
  
  pinAddress : NULL
  
  regionAndEcommBlocking : { &quot;ecomm&quot;: false, &quot;africa&quot;: false, &quot;asia&quot;: false, &quot;europe&quot;: false, &quot;home&quot;: false, &quot;northAmerica&quot;: false, &quot;oceania&quot;: false, &quot;southAmerica&quot;: false }
  </code></pre>
  <p>I got some advice that I'd probably need to make another component as a child component, so I can iterate through the <code>obtainedCardInfo</code> inside the child component, and then import the child component like this.</p>
  <pre><code>&lt;div v-for=&quot;element in arrayOfElements&quot;&gt;&lt;child-component :data=&quot;element&quot; /&gt;&lt;/div&gt;
  </code></pre>
  <p>So I began to work on making another component, but here comes another problem.
  I can't pass the object data to the component <code>DetailedInfoChild.vue</code> that I made, when I tried to pass the data as the following code.</p>
  <pre><code>&lt;div class=&quot;cardInfoDisplay&quot;&gt;
      &lt;app-detailed-info-child v-bind=&quot;obtainedCardInfo&quot;&gt;&lt;/app-detailed-info-child&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I thought it was weird when it was not working, because this should follow the syntax from the official documentation of Vue.js.</p>
  <p><a href="https://v2.vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object</a></p>
  <p>And what feels even weirder to me is that I could pass the data when I tried passing a single member of the object instead of the entire object as below.</p>
  <pre><code>&lt;app-detailed-info-child v-bind:id=&quot;obtainedCardInfo.id&quot;&gt;&lt;/app-detailed-info-child&gt;
  </code></pre>
  <p>What could I be doing wrong?</p>
  <p>And here is the code of the component <code>DetailedInfoChild.vue</code> that I wrote.</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;info-child&quot;&gt;
          &lt;p&gt;The ID is {{ id }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: {  
                  accountId: String,
                  id: String,
                  customerId: String,
                  cardRole: String,
                  cardStatus: String,
                  truncatedCardNumber: String,
                  cardTemplate: String,
                  cardAddress: {
                      address1: String,
                      address2: String,
                      address3: String,
                      address4: String,
                      city: String,
                      country: String,
                      region: String,
                      zipCode: String
                  },
  </code></pre>