Default values being overwritten with undefined

I have a problem where my default values are being overwritten by the meteor method call causing an error Cannot read property 'profile' of undefined at Proxy.About.vue.__vue_options__.render (About.vue:47) in the console.

My component looks like this:

<template>
    <div class="ui main container about">
        <div class="ui two column centered stackable grid animated fadeIn">
            <div class="ui one column center aligned">
                <form class="ui form about-form" v-on:submit.prevent="sendEmail">
                    <div class="field image-field">
                        <h3 class="about-title">title.</h3>
                        <h4 class="about-description">yaay</h4>
                        <h2 class="about-call-to-action">Say Hello</h2>
                    </div>
                    <div class="field">
                        <input type="text" :placeholder="email" class="about-email"  v-model="user.profile.email">
                    </div>
                    <div class="field fullname-container">
                        <input type="text" class="about-fullname" :placeholder="Fullname" v-model="user.profile.fullname">
                    </div>
                    <div class="field">
                        <div class="ui selection dropdown about-message-title">
                            <input type="hidden" name="gender">
                            <i class="dropdown icon"></i>
                            <div class="default text">I got an idea</div>
                            <div class="menu">
                                <div class="item" data-value="Idea">I got an idea</div>
                                <div class="item" data-value="Bug">Found a bug</div>
                                <div class="item" data-value="Product">Submit this product</div>
                                <div class="item" data-value="Business">Let's talk business</div>
                                <div class="item" data-value="Job">I am looking for a sideproject</div>
                                <div class="item" data-value="Other">Other</div>
                            </div>
                        </div>
                    </div>
                    <div class="field about-message-field">
                        <textarea type="text" :placeholder="Message" rows="6" class="about-message" v-model="message"></textarea>
                    </div>
                    <div class="field">
                        <button class="ui button blue send-message-button" :click.prevent="sendEmail">
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    metaInfo: {
        title: 'About',
        meta: [
            { vmid: 'description', name: 'description', content: '...' }
        ]
    },
    data() {
        return {
            message: "",
            user: {
                profile: {
                    email: 'default email',
                    fullname: 'default fullname'
                }
            }
        }
    },
    meteor: {
        user() {
            return Meteor.user();
        }
    },
    mounted() {
        $('.dropdown').dropdown();
    },
    methods: {
        sendEmail() {
            ...
        }
    }
};

</script>

<style lang="less" scoped>

...

</style>

After the error the user is being loaded and I can see the email/fullname in the form. But my dropdown does not work because of the error. If I remove the meteor tag everything works as expected and I can see "default email" and "default fullname" in the form.

So it seems like before my data is loaded my user object is being replaced with undefined. Is there a workaround for this? Thanks

meteor-vue / vue-meteor-tracker

Default values being overwritten with undefined #8