title: Unable to access nested elements and to apply functions in Vue template?
body: <p>I'm new to web development and I'm running into an issue I can't solve...
  I'm using Vuejs, Express, MongoDB and Fetch API...</p>
  <p>In my script I'm fetching data from my local server:</p>
  <pre><code>  mounted() {
      fetch(&quot;http://localhost:5000/api/&quot; + this.$route.params.id)
        .then((res) =&gt; res.json())
        .then((data) =&gt; {
                this.data = data
                console.log(this.data.telegram.length)
        })
        .catch((err) =&gt; console.log(err.message))
    }
  </code></pre>
  <p>console.log is working fine.</p>
  <p>data is returned like that:</p>
  <pre><code>{ &quot;_id&quot;: &quot;6061ee831114fc4c211678e6&quot;, &quot;path&quot;: &quot;mypath&quot;, &quot;telegram&quot;: [ { &quot;date&quot;: &quot;2021-03-21T22:00:00.708Z&quot;, &quot;followers&quot;: 2188 }, { &quot;date&quot;: &quot;2021-03-22T18:40:04.751Z&quot;, &quot;followers&quot;: 2195 } ], &quot;__v&quot;: 0 }
  </code></pre>
  <p>Then data is stored as:</p>
  <pre><code>  data() {
      return {
        data: []
      }
    }
  </code></pre>
  <p>First of all, I'm surprised by the format of my data. I believed it was going to appear as JavaScript Format, meaning without quotes (&quot; &quot;) on keys... I tried to JSON.parse the response but it returns an error like if it was already parsed. Is it normal ?</p>
  <p>Also, in my template, I'm unable to access properties of this 'data'.</p>
  <p>For example:</p>
  <pre><code>&lt;p&gt;{{data.telegram[0]}}&lt;/p&gt;
  </code></pre>
  <p>or</p>
  <pre><code>&lt;p&gt;{{data.telegram.length}}&lt;/p&gt;
  </code></pre>
  <p>is returning 'Uncaught (in promise) TypeError: Cannot read property '0' of undefined' and 'Uncaught (in promise) TypeError: Cannot read property 'length' of undefined'.</p>
  <p>It seems there is something I have not quite understood...</p>
  <p>Any help appreciated !</p>