title: Can't Access Object Properties In Vue
body: <p>I'm having problems accessing object properties in Vue.
  This is my component.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;b&gt;
              {{ posts }}
              &lt;a :href="'https://steemit.com/&amp;#64'+ posts.author + '/' + posts.link "&gt;{{ posts.title }}&lt;/a&gt;
               &lt;a :href="'https://steemit.com/&amp;#64'+ posts.author"&gt;{{ posts.author }}&lt;/a&gt;
                  &lt;input @click="vote('1')"  type="button" value="Vote" &gt;
          &lt;/b&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
              name: "vote-button",
  
              props: [
                  'code',
                  'user',
                  'posts'
  
              ],
              methods: {
                  vote: function (counter) {
                  }
              }
      }
  
  &lt;/script&gt;
  </code></pre>
  
  
  
  <p><code>{{ posts }}</code> prints out the whole object, which looks like this:</p>
  
  <pre><code>{"id":1,"title":"#1 WordPress Website","body":"![#1 WordPress Website Host ","author":"jerry","link":"1-wordpress"}
  </code></pre>
  
  <p>But if I do <code>{{ posts.author}}</code> I get undefined.</p>