title: How to assign a value to a vue component data member in mounted event
body: <p>I have been reading the vue documentation and starting to write some code to test my knowledge. I have tried to write a component that sets a data member when mounted but it seems not to work as expected. The component data member "profiles" is always empty. My intuition says it could be something about scope but not sure:</p>
  
  <pre><code>Vue.component('profile-grid', 
  {
      template: '&lt;section&gt; {{profiles}} &lt;/section&gt;',
      //Data es la parte privada del documento. Props la parte publica que se deberia de pasar desde la instancia Vue
      data: () =&gt;
      {
          return {
              profiles: []
          };
      },
      methods:
      {
      },
      created: () =&gt;
      {
          //console.log("I was just created")
      },
      mounted: () =&gt;
      {
          //console.log("I was just mounted")
          this.profiles = ['1', '2', '3'];     
      }
  
  })
  
  //Vue instance
  new Vue(
  {
      el:'main',
      data:
      {
      },
      methods:
      {
      },
      mounted: () =&gt;
      {
      }
  
  });
  </code></pre>
  
  <p>HTML Page</p>
  
  <pre><code>//HTML Page
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;main&gt;
          &lt;profile-grid&gt;&lt;/profile-grid&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Do anybody know what is happening?</p>
  
  <p>Thanks in advance.</p>