Vuejs not rendering templates, using browerify with laravel Elixir-Vueify

So i'm trying to render a component using vuejs like this, this is the body of my index.html

    <div class="container-fluid">       
        <div id="main" class="container-fluid">         
                <navbar></navbar>
                <posts></posts>
        </div>
    </div>

For this components navbar and posts i have the following files .vue

post.vue

    <template id="post">
    <div class="row container-blog">
        <div class="col s12 m6 l4" v-for='post in posts'>
            <div class="card large">
                <div class="card-image">
                    <img src="http://materializecss.com/images/sample-1.jpg">
                </div>
                <div class="card-content">
                    <span class="card-title">@{{post.title}}</span>
                    <p>@{{post.content_raw}}</p>
                </div>
                <div class="card-action valign-wrapper">                    
                    <a class="center-align col s3 whatsapp" href="#"><i class="fa fa-whatsapp fa-2x "></i></a>  
                    <a class="center-align col s3 googleplus" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                    <a class="center-align col s3 facebook" href="#"><i class="fa fa-facebook fa-2x"></i></a>
                    <a class="center-align col s3 twitter" href="#"><i class="fa fa-twitter fa-2x"></i></a>
                </div>
            </div>
        </div>
        <div class='ajaxPosts'></div>
    </div>

</template>
<script>
    export default {
        template: '#post',
        created(){
            this.fetchPosts();          
        },
        methods:{
            fetchPosts(){
                $.getJSON( this.proximo ,function(data){  
                    this.proximo = data.next_page_url;
                    _.each(data.data,function(post){
                        console.log(post);
                        this.posts.push(post);
                    }.bind(this));
                }.bind(this))
            }
        },
        data() {
            return {
                posts:[],
                proximo: '/'
            }
        }
    }
</script>

and navbar.vue:

    <template>
    <div class="navbar-fixed">
        <nav>
            <ul id="slide-out-left" class="side-nav fixed">
                <li class="logo"><a id="logo-container"href="#!" ><i class="fa fa-archive fa-5x"></i></a></li>
                <form>
                    <div class="input-field">
                        <input id="search" type="search" required>
                        <label for="search"><i class="material-icons">search</i></label>
                        <i class="material-icons">close</i>
                    </div>
                </form>
                <li><a href="#!">First Sidebar Link</a></li>
                <li><a href="#!">Second Sidebar Link</a></li>
            </ul>
            <a id="button-left" href="#" data-activates="slide-out-left" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#!">Sass</a></li>
                <li><a href="#!">Components</a></li>
            </ul>
            <ul id="slide-out-right" class="side-nav">
                <li><a href="#!">bar Link</a></li>
                <li><a href="#!">bar Link</a></li>
            </ul>
            <a id="button-right"href="#" data-activates="slide-out-right" class="right button-collapse"><i class="mdi-navigation-menu"></i></a>

        </nav>
    </div>
</template>
<script>
    export default {

    }
        $('#button-right').sideNav({
            edge: 'right'
        });
        $('#button-left').sideNav({
            edge: 'left'
        });
</script>

And then i import every thing using a main.js compiled by gulp laravel-elixir-vueify

main.js

    var Vue = require('vue');


import Navbar from './components/navbar.vue';
import Posts from './components/posts.vue';

new Vue({
    el:'#main',
    components: {Navbar, Posts},//<navbar>

    ready(){
        // alert('Ready to go');
    }
})

So every thing seems to be ok, when i run the page i don't get any errors in the console, but my component's tags doesn't show up in the html of the page showing nothing, just a blank page, the curious part is that if i change the import in the main.js to a wrong name like 'navigator'

import navibar from './components/navbar.vue';
components: {navigator}

I get a vue mensage: [Vue warn]: Unknown custom element: - did you register the component correctly?

and the tag appears in the loaded html.

So i must be missing something, anyone can help ?