Problem with Vue router duplicating App component

Question

The router

import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'App',
      component: App,
      meta: {
        title: 'App'
      }
    }
  ]
})

export default router

App.vue

<script setup>

import { RouterLink, RouterView } from 'vue-router'

</script>

<template>
  <div>
    <RouterLink to="/">Home</RouterLink>
  </div> 
  <div>
      <RouterView />
  </div>  
</template>

All other routes are working as well, but the route "/" displays duplicated content from App. If I do not include component: App in the routes file, the app works normal, but it gives me a warning that record with path "/" is missing a "component(s)".