title: Vue Component props value is does not seem on template
body: <p>Everything is fine in my main.js</p>
  
  <pre><code>import User from './components/User.vue'
  
  new Vue({
      el: '#user',
      render: h =&gt; h(User),
      data() {
          return {
              groups: []
          }
      },
      mounted() {
          this.getGroups();
      },
      methods: {
          getGroups: function () {
              axios.get('http://vagrant.dev/groups')
                  .then(response =&gt; this.groups = response.data)
                  .catch(error =&gt; console.log(error));
          }
      }
  });
  </code></pre>
  
  <p>User.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="user"&gt;
          {{groups}} &lt;!-- must be printed but it doesn't seem --&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          name: 'user',
          props: ['groups']
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and index.html</p>
  
  <pre><code>&lt;div id="user"&gt;
      &lt;user :groups="groups"&gt;&lt;/user&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yC9FW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yC9FW.png" alt="enter image description here"></a></p>
  
  <p>Where is the mistake? </p>
  
  <p>I do not get any errors, but I didn't understand why the value was not printed on the screen</p>