VueJS - how pass input parameters to the single page component

I use Laravel, and I wan't to pass parameters to the single page VUEJS component from blade.php template.

<example-component :userName="{{ Auth::user()->name }}"></example-component >

In my app.js file, I have a code:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');

import 'es6-promise/auto';

import store from './store'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#main',
    store
    }
});

This is code of my ExampleComponent.vue:

<template>
<div>
    {{userName}}
</div>
</template>

<script>
export default {
    props: ['userName'],
    data(){
        return {
            temperature: ''
        }
    },
    computed: {

    },
    methods: {
    }
}
</script>

<style>

</style>

I have error [Vue warn]: Error compiling template: invalid expression: Unexpected identifier in

user name

Raw expression: :username="user name"

How to pass parameters to the single page VUEJS component from blade.php template?