Laravel+Elixir+vue.js?

Question

gulp.js

Good time everyone, please help me figure it out. The second day has gone already, it does not work with single-file components. Do not judge strictly because the front is not my forte. In general, I kneaded everything according to the instructions:

"devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^4.0.0",
    "laravel-elixir-vueify": "^1.0.0",
......

Next install and:

elixir(function(mix)  {
    // mix.scriptsIn('resources/assets/js', 'resources/assets/res.js')
    mix.browserify('app.js');
});

Here is app.js :

import Vue from 'vue'
import Hero from './Hero.vue'

new Vue({
    el: '#ahtung',
    components: { Hero }
});

Here is Hero.view:

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'Matt Stauffer'
            };
        }
    };
</script>

<style>
    .profile {
        background: #eee;
        border: 1px solid #aaa;
        border-radius: 2em;
        margin: 2em auto;
        min-height: 150px;
        padding: 2em;
        width: 300px;
    }
</style>

gulp collects everything without errors, I insert into the blade: ... and nothing like that happened. In what and where I blunted, please help me figure it out, I really want to use this view.
<hero></hero>

Answer 1

I asked it myself, I answer it myself:
They could write about it in the documentation about the elixir! A little outraged even)))
The error described above is connected with the intersection of the blade mintaxis and the view component, if not smeared:
This part is -

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

should look like this, and just that, so much time wasted, I hope it saves someone:

<template>
    <div class="profile">
        @{{ name }}
    </div>
</template>

Curly braces blade eats in its own way. Thanks to all!