How to use meteor + Vue + useraccounts?

I’m currently building my first app with meteor and vue and try to integrate the useraccounts:core / bootstrap package.

It seems that there are people that managed to use the useraccounts:* packages together with a Vue project, e.g. Proper handling of computed property with vue-meteor-tracker

However, I didn’t manage yet to get this working. I created a login page using vuejs:blaze-integration.

Login.vue

<template>
  <div>
    <blaze-template template="atForm" tag="span" />
  </div>
</template>

I started using the VueRouter (as I managed to get this working together with Vue and I’m familiar with it anyway). Router initialization:

/* global Meteor:false */
import Vue from "vue"
import VueRouter from "vue-router"
import { routes } from "./routes"

Vue.use(VueRouter)
export const router = new VueRouter({
  routes, // short for `routes: routes`
})

// check if used has been logged in
router.beforeEach((to, from, next) => {
  if (!to) next()
  console.log("navigate to", to.name, "user", Meteor.user())
  if (to.name !== "login" && !Meteor.user()) next({ name: "login" })
  else next()
})

routes.js:

import Login from "/imports/ui/layouts/Login.vue"
//...

export const routes = [
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/",
    component: AppLayout,
    children: [
       //...
     ]
  }
]

With this setup, the signin page shows up and I also also navigate to the register form. (I guess it stays within the form.)

However, as soon as I login, the app stays blank, even after reload. (If I clear all site data I can restart with login again.)

I guess that I need to add some navigation information from /login to /?

Or should I wrap my AppLayout with an v-if to check whether the user is logged in and switch between login and main app there?

Any suggestions?

Is there any documentation available about this case or any sample project?

Thanks!