Everything is fine in my main.js

```
import User from './components/User.vue'

new Vue({
    el: '#user',
    render: h => h(User),
    data() {
        return {
            groups: []
        }
    },
    mounted() {
        this.getGroups();
    },
    methods: {
        getGroups: function () {
            axios.get('http://vagrant.dev/groups')
                .then(response => this.groups = response.data)
                .catch(error => console.log(error));
        }
    }
});

```

User.vue

```
<template>
    <div id="user">
        {{groups}} <!-- must be printed but it doesn't seem -->
    </div>
</template>
<script>
    export default {
        name: 'user',
        props: ['groups']
    }
</script>

```

and index.html

```
<div id="user">
    <user :groups="groups"></user>
</div>

```

[![enter image description here](https://i.stack.imgur.com/yC9FW.png)](https://i.stack.imgur.com/yC9FW.png)

Where is the mistake? 

I do not get any errors, but I didn't understand why the value was not printed on the screen