How to get rid of wrapping root element in entry-point component?

In my App.vue (root component), I render LoginView or AuthenticatedView depending on the authentication state of the user.
In the code below, is there any way to get rid of the the wrapping div element? I guess there are tons of apps with a similar structure (login screen + logged-in screen). How is this usually solved?

<!-- App.vue -->
		<LoginView v-if="authenticated"/>
		<AuthenticatedView v-if="false === authenticated"/>	

import AuthenticatedView from "@/views/AuthenticatedView"
import LoginView from "@/views/LoginView"

export default {
  name: 'App',
  components: {
  mounted: function() {
  methods: {
  computed: {
	authenticated() {
		return this.$store.state.authenticated;

<style scoped>

Thanks for your help.

Just use render function instead of template

It should work if you add a v-else to the second component

  <LoginView v-if="authenticated"/>
  <AuthenticatedView v-else/>