Vue-meta overwrites TITLE if there are nested components, why?

Question

Vue.js

By url / , a component is used where there is a nested About component that overwrites the title . It turns out that on the main page the title = "About me", instead of "Artist-ceramist". For this I am using vue-meta

Home Component:

<template>
    <div>
        <div class="welcome">
            <img src="//via.placeholder.com/1920x720?text=Slide_1 1920x720" class="img-responsive">
            <a href="#" class="btn btn-fill">Хочу записаться</a>
        </div>

        <about></about>
    </div>
</template>

<script>
    import About from './About'

    export default {
        name: 'Home',
        components: { About },
        metaInfo: {
            title: 'Художник-керамист',
        }
    }
</script>

About Component:

<script>
    export default {
        name: 'About',
        metaInfo: {
            title: 'Обо мне'
        }
    }
</script>

How can this problem be solved?

Answer 1

Because it 's designed like this :

Child components that have metaInfowill recursively merge them metaInfointo the parent context, overwriting any duplicate properties.

How can this problem be solved?

Do not nest one component within another.