Laravel Localization "fallback_locale" is not working | Laravel9 vue3 Inertia.js

Hey folks, I'm facing an issue with language switching and fallback locale in a Laravel project using Inertia.js and Vue.js. I have set up multiple language files (en.json and de.json) with translations for my application. The issue I'm encountering is that the language (en.json) works fine , but it fails to switch to the fallback locale (de) when the selected language is not supported or missing (e.g., en.json).

1- I have tried to clear the cache and view but issue still persist. 2- In the config/app.php file, I have set the locale to 'de' and fallback_locale to 'de' as well:

'locale' => 'de',
'fallback_locale' => 'de',
'supported_locales' => ['en', 'de'],

This is what I have done so far apart from configuration:

In my index method of product controller, I'm passing the translations to the Home.vue page and receiving it as a prop there (which is working fine) here is my controller and vue code

Controller code:

    public function index(){
        $locale = app()->getLocale();
        $translations = json_decode(file_get_contents(resource_path("lang/$locale.json")), true);
 
return inertia('Home',[
            'translations' => $translations,
        ]);
}

Home.vue code

<template>
    <div>
        <navbar />

        <!-- Other content of home page -->
                                <h1>{{ $t('home') }}</h1> //The output of this is Homeiesss
</div>
</template>
<script>
import navbar from "@/layouts/navbar.vue";
import footnote from "@/layouts/footer.vue";
export default {
 components: {
        navbar,
        footnote,
    },
    props: {
    translations:{
            type:String,
            required:true,
        }
}
  methods: {
            $t(key) {
      return this.$page.props.translations[key] || key;
    },
</script>

Now Lastly here are my en.json and de.json files located in "WebRoot\resources\lang" directory and here are the content of them

en.json

{
    "home": "Homeiesss",
    "about_us": "About Us",
    "news": "News",
    "collection": "Collection",
    "browse": "Browse",
    "links": "Links",
    "register": "Register",
    "login": "Login",
    "language": "Language"
}

de.json

{
    "home": "Startseite",
    "about_us": "Über uns",
    "news": "Nachrichten",
    "collection": "Sammlung",
    "browse": "Durchsuchen",
    "links": "Links",
    "register": "Registrieren",
    "login": "Anmelden",
    "language": "Sprache"
}

Now as i mentioned that i can correctly print the content of en.json but when issue is fallback locale is not working properly becuse when i try to delete the en.json file i got the following error:

file_get_contents(C:\xampp\htdocs\DinoToyCollection\resources\lang/en.json): Failed to open stream: No such file or directory

Now my question is where I'm making mistakes and how can make this dynamic? Like allow the user to change the language from the navbar component and it should remain persistent to all the pages.