vue new syntax

main.html

<div>
    <header v-show="skey" v-cloak>
        <ul id="slide-out" class="side-nav fixed">
            <li class="logo">
                <img src="http://doc.aidax.com.br/images/logo.png" width="160" height="70">
            </li>
            <li :class="{active: current_view === 'metrics'}"><a class="waves-effect waves-teal" href="#!" @click="set_route('metrics')">Métricas</a></li>
            <li :class="{active: current_view === 'data'}"><a class="waves-effect waves-teal" href="#!" @click="set_route('data')">Dados</a></li>
            <li :class="{active: current_view === 'actions'}"><a class="waves-effect waves-teal" href="#!" @click="set_route('actions')">Ações</a></li>
            <li :class="{active: current_view === 'profiles'}"><a class="waves-effect waves-teal" href="#!" @click="set_route('profiles')">Perfis</a></li>
            <li :class="{active: current_view === 'hooks'}"><a class="waves-effect waves-teal" href="#!" @click="set_route('hooks')">Gatilhos</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-arrow-drop-downmenu"></i></a>
    </header>
    <div class="row" v-cloak>
        <div class="col s12" v-show="!skey">
            <h3 class="center-align">AIDAX</h3>
        </div>
        <div id="client_greetings" v-else>
            <span>{{online_users}} online em <strong>{{client_name}}</strong></span>&nbsp;
            <a @click="logoff" class="btn red">Logoff<i class="material-icons right">send</i></a>
        </div>
    </div>
    <login v-ref:login @client_info="client_info"></login>
    <main v-show="skey">
        <component :is="current_view" :skey="skey"></component>
    </main>
</div>