即使该对象中存在道具，在Vue.js组件方法中也不可用

Question

我正在像这样向我的组件传递道具：

<friend-create-form v-bind:group-id="group_id"></friend-create-form>

在组件中我有这个：

<script>
    import Multiselect from 'vue-multiselect';
    const axios = require('axios');

    // register globally
    Vue.component('multiselect', Multiselect);

    export default {
        components: { Multiselect },
        props: ['groupId'],
        data () {
            return {
                group: {},
                friend: {},
                options: [],
                errors: []
            }
        },
        methods: {
            addTag(newTag) {
                const tag = {
                    name: newTag,
                    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
                };
                this.options.push(tag);
                this.friend.tags.push(tag);
            },
            fetchGroup() {

                console.log(this.groupId);

            }
        },
        mounted : function(){

            this.fetchGroup();

        }
    }
</script>

当我在vue开发工具中检查组件时，我看到了道具：

但是，已装入方法中的console.log表示groupId是false。我被困在这里。当我console.log(this)在同一个地方看起来不是问题所在时，this似乎是整个vue实例，因此它应该包含道具，不是吗？

我尝试了在另一个SO答案中找到的解决方案，但它给出了语法错误：

${this.groupid}