title: Child of data object not being evaluated until logged. Vue.js
body: <p>I am writing a component (<code>form</code>) that acts as a container for form fields that are passed from the parent component.</p>
  
  <p>I pass the form fields to the child as a prop:</p>
  
  <pre><code>formFields: [
      { name: 'email', type: 'email' },
      {
          name: 'sub_group',
          type: 'group',
          contents: [
              { name: 'sub_field_01', type: 'text' },
              { name: 'sub_field_02', type: 'text' },
          ]
      }
  ]
  </code></pre>
  
  <p>That is all displayed fine and works well in my child component. </p>
  
  <p>I used a computed property to build up data to post to a route to update the resource. I group the <code>sub_group</code> so that when I am posting, the controller understands that the <code>sub_group</code> is an array.</p>
  
  <p>However, the <code>sub_group</code> array is always empty <em>until I console log it</em>, so it only evaluates when logged. The top level (<code>email</code> in this case) always shows up.</p>
  
  <p>I have tried getting rid of the computed property and use a method to build up the object to post but I have the same issue. I really have no idea what is happening. How can 'force' the computed property to evaluate?</p>
  
  <p><strong>EDIT Adding form example</strong></p>
  
  <p>Code that renders the form:</p>
  
  <pre><code>&lt;div v-for="field in formFields"&gt;
      &lt;!-- Individual Field --&gt;
      &lt;div v-if="field.type !== 'group'"&gt;
          &lt;label v-if="field.label"&gt;{{ field.label }}&lt;/label&gt;
          &lt;input :type="field.type" :name="field.name" v-model="field.value"&gt;   
      &lt;/div&gt;
      &lt;!-- Group --&gt;
      &lt;div v-else&gt;
          &lt;div v-for="child in field.group"&gt;
              &lt;label v-if="child.label"&gt;{{ child.label }}&lt;/label&gt;
              &lt;input :type="child.type" :name="child.name" v-model="child.value"&gt;   
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Computed property for post:</p>
  
  <pre><code>&lt;div v-for="field in formFields"&gt;
      &lt;!-- Individual Field --&gt;
      &lt;div v-if="field.type !== 'group'"&gt;
          &lt;label v-if="field.label"&gt;{{ field.label }}&lt;/label&gt;
          &lt;input :type="field.type" :name="field.name" v-model="field.value"&gt;   
      &lt;/div&gt;
      &lt;!-- Group --&gt;
      &lt;div v-else&gt;
          &lt;div v-for="child in field.group"&gt;
              &lt;label v-if="child.label"&gt;{{ child.label }}&lt;/label&gt;
              &lt;input :type="child.type" :name="child.name" v-model="child.value"&gt;   
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I realise this needs refactoring but I can't actually get it working like this. I have tried adding <code>cache:false</code> and a getter to the computed property but that didn't work.</p>