V-model on existing data from external api

ran into a bit of an issue.

I'm running a next js frontend with a laravel + inertia custom cms, I have my next js app setup so that I can read translation files via an API call to display inside of the cms.

E.g. I have a TranslationsAPI.php file which contain a few functions, one of these is called getTranslations whih looks like this

    public function getTranslations(string $locale, string $file): mixed
    {
        $data = [];

        $response = Http::get(config('app.frontend_url') . 'api/read-translations?locale=' . $locale . '&file=' . $file);

        if ($response->successful()) {
            $data = $response->json();
        }
        return $data;
    }

if one where to set the locale param to en-US and the file param to common.json, this function would return a json object containing the follow data:

{
  "intro": "NOT_TRANSLATED",
  "new": "NOT_TRANSLATED",
  "info": "NOT_TRANSLATED",
  "back": "NOT_TRANSLATED",
  "touch": "NOT_TRANSLATED",
  "name": "NOT_TRANSLATED",
  "email": "NOT_TRANSLATED",
  "message": "NOT_TRANSLATED",
  "send": "NOT_TRANSLATED",
  "copyright": "NOT_TRANSLATED",
  "about": "NOT_TRANSLATED",
  "contact": "NOT_TRANSLATED",
  "change-locale": "NOT_TRANSLATED",
  "errorFetching": "NOT_TRANSLATED",
  "loadingFetching": "NOT_TRANSLATED"
}

Now inside of my TranslationsController I call this method

    public function index(Request $request): Response
    {

        if ($request->input('language')) {
            return Inertia::render('Translations/index', [
                'translations' => $this->getTranslations->getTranslations($request->input('language'), $request->input('file')),

            ]);
        }

        return Inertia::render('Translations/index', [
            'translations' => $this->getTranslations->getTranslations('nl-NL', 'common.json'),
        ]);
    }

and display it inside of my vue component

    props: {
        translations: {
            type: Object,
            default: null
        },

        files: {
            type: Object,
            default: null
        }
    },

and render it as inputs

                    <div v-if="translations" class="flex flex-col my-2" v-for="(value,index) in translations">
                        <div :key="index" class="form-control">
                            <div class="relative my-2 items-center justify-center flex">
                                <input type="text" placeholder="Your translation string"
                                       name="translation-key"
                                       class=" pr-16 input input-primary input-bordered mx-2" :value="index"/>

                                <input type="text" placeholder="Your translation string"
                                       name="translation-value"
                                       class=" pr-16 input input-primary input-bordered mx-2" :value="value"/>
                                <button type="button"
                                        class="absolute top-0 right-0 rounded-l-none btn btn-error no-animation"
                                        @click="removeInput(index)">delete
                                </button>
                            </div>
                        </div>
                    </div>

And this is where my problem arises,I can add new translations and delete existing ones. But I'm not sure how to properly wire up a v-model to the existing translations so that they can be edited and updated.

Basically something like

  <input type="text" placeholder="Your translation string"
         name="translation-key"
         v-model="somethinghere" <--- this needs to be a v-model to update the existing translations
         class=" pr-16 input input-primary input-bordered mx-2" 
         :value="index"/>