Vue-meta перезаписывает TITLE если есть вложенные компоненты, почему?

Question

[Виктор Янышев]

По урл / используется компонент где есть вложенный компонент About, который перезаписывает title. Получается так что на главной странице тайтл = "Обо мне", вместо "Художник-керамист". Для этого я использую vue-meta

Компонент Home:

<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:

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

Как можно решить эту проблему?

Answer 1

[0xD34F]

Потому что он так устроен:

Child components that have metaInfo will recursively merge their metaInfo into the parent context, overwriting any duplicate properties.

Как можно решить эту проблему?

Не вкладывать один компонент в другой.

Comments

[Виктор Янышев]

Если у меня на главной странице есть те компоненты что на другой странице, как быть тогда?

[Klein Maximus]

Виктор Янышев, разделите компоненты на умные (оперируют данными) и глупые (оперируют отображением).