vue.js-Vue组件道具值似乎不在模板上

在我的 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>

和 index.html

<div id="user">

    <user :groups="groups"></user>

</div>

错误在哪里？

我没有收到任何错误，但我不明白为什么该值没有打印在屏幕上