title: Issue with props and v-bind in VueJS
body: <p>This may be a simple fix but I am not from a javascript background and am learning on the fly pretty much. So props and all that jazz isn't something I am fully understanding (yet!). </p>
  
  <p>I want to display a specific key:value pair from this array:</p>
  
  <pre><code>health: [{ playerHealth: 100}, {monsterHealth: 100}]
  </code></pre>
  
  <p>this short piece of code is found in the data() section of App.vue with export default as follows: </p>
  
  <pre><code>data() {
  return {
    health: [{
      playerHealth: 100
    }, {
      monsterHealth:100
    }]
  </code></pre>
  
  <p>It is passed into the component "health" as follows: </p>
  
  <pre><code>&lt;health :health="health"&gt;&lt;/health&gt;
  </code></pre>
  
  <p>In health.vue I am trying to display the playerHealth value, the way I am attempting this what follows in the template: </p>
  
  <pre><code>&lt;div&gt; {{health.playerHealth}} &lt;/div&gt;
  </code></pre>
  
  <p>My export section is this: </p>
  
  <pre><code>export default {
  </code></pre>
  
  <p>props:['health'],
    name:"Health"</p>
  
  <p>However I am getting nothing displayed. What I can display however is simply just {{health}}. That returns the full array. Am I accessing the values incorrectly? </p>
  
  <p>Any help would be appreciated I am aware it may be a simple thing but I haven't found an answer. </p>
  
  <p>If you require full code of each vue file please let me know.</p>