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?

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

<script>
import AuthenticatedView from "@/views/AuthenticatedView"
import LoginView from "@/views/LoginView"

export default {
  name: 'App',
  components: {
	AuthenticatedView,
	LoginView
  },
  mounted: function() {
  },
  methods: {
  },
  computed: {
	authenticated() {
		return this.$store.state.authenticated;
	}
  }
}
</script>

<style scoped>
</style>

Thanks for your help.

Just use render function instead of template

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

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