How do we iterate through an object with the keys of the object from API matching with that of the keys defined in translation file in Vue?

Question

I have an object

var data= { "Date": "01-01-2024", "Code": "5000", "region": "NA" } 

(This data is fetched from an API)

and a translation file en.json (vue-i18n for language translation)

en.json:

    {"info": {
        "Code": "CODE",
        "Date": "DATE",
        "region": "REGION"
      }}

I'm trying to display the data in a v-list

    <v-list  v-for="(value, key) in data" :key="key">
    <v-list-item>
         <v-list-item-content>
              <v-row>
                  <v-col>
                     {{ $t(`info.$key`) }}
                   </v-col>
                   <v-col>
                     {{ value }}
                    </v-col>
               </v-row>
           </v-list-item-content>
      </v-list-item>

      </v-list>

This is the code which I tried.
I'm expecting output like

DATE    01-01-2024
CODE    5000
REGION  NA

But I'm getting

info.$key  01-01-2024
info.$key 5000
info.$key NA

And I have a warning in console which says "Not found 'info.key' key in 'en' locale messages."

Can someone help with what's wrong here?