Problème avec props

Bonjour à tous,

alors j'ai créé un fichier config.json pour mon api avec vueJS, pour mettre le nom du site et ne pas à le modifier sur toutes les pages si celui-ci est changé.

il se présente comme ça:

{
"name": "Fox"
}

dans mon Layout.vue

<template>
<div>
<TheHeader :name="name"/>
<main>
<slot></slot>
</main>
</div>
</template>

<script>
import TheHeader from './TheHeader.vue'
import { name } from '../config.json'

export default{

components: {
    TheHeader
},

 data(){
    return {
        name: name
    }
}
}
</script>

ensuite, dans mon fichier TheHeader.vue je récupère le nom du site avec mon props: ['name'], que j'affiche ensuite comme ça : {{name}}

Hors j'aimerai utilisé également le nom de mon site dans mes pages, pour le coup c'est pour ma page de contact où j'ai besoin d'afficher plusieurs fois le nom du site, j'ai donc appelé mon props dans ma view mais il ne s'affiche pas.

Comment puis-je régler ce problème d'enfant/parents avec les props, sachant que j'avais essayé en premier lieu de le mettre dans mon App.vue mais j'ai eu le même soucis.

Merci beaucoup