controls is not reactive, this needs to be changed:

const controls = ref();
...
controls.value = buildControls(...);

Or:

const controls = reactive(buildControls(...));

But the problem is that controls is intended for two-way synchronization with file, its structure makes it hard to implement. This is a general problem with storing mixed mutable and static data, there are not enough reasons to keep it together.

If the component is supposed to emit file changes to a parent based on the changes that v-model=”item[idx].model”` there will be problems with tracking specific changes.

There should be a list of metadata keys that both static and mutable data could use. The suggested way is to keep static field data as a constant, so the types could derive from it for extra type safety (ValidateKeys can be implemented like shown here):

const fileMetaFields = {
  owner: {
    label: 'Owner',
    type: 'text'
  },
  ...
}

type FileMetaKeys = keyof typeof fileMetaFields;

type FileMeta = ValidateKeys<FileMetaKeys, {
  owner: string,
  ...
}

Additional utility types could be written to automatically map type: 'text' to string type.

The component may not need own state if it’s supposed to update parent’s model. v-model in v-text-field limits the ways in which the model could be updated, so it needs to be desugared:

  function updateModelField({ key, value }) {
    emit('update:modelValue', {
      ...file.value,
      metadata: {
        ...file.value.metadata
        [key]: value
      },
    });
  }

  ...

  <div v-for=(field, key) in fileMetaFields>
    <v-text-field
      :label="field.label"
      :modelValue="file.value.metadata[key]" />
      @update:modelValue="updateModelField({ key, value: $event })"
      ... 

This indicates the problem with file. In order to prevent model prop from being mutated in a child and do this in a parent like Vue two-way binding requires, the whole object needs to be cloned to change one field. This is inefficient and can be avoided by providing a child with only data it needs (metadata instead of file) and updating file in a parent with custom event rather than v-model.

So it would be in the child:

  const props = defineProps<{ data: FileMeta }>();

  function updateModelField({ key, value }) {
    emit('update:field', { key, value });
  }

In a parent:

<FileMetaForm
  :data="file.metadata"
  @update:field="file.metadata[$event.key] = $event.value"
>

If you want keep reactivity of data, you can use computed，modify your code as follows:

<script setup lang="ts">
interface FileMetadata {
  owner: string,
  location: string,
  size: number,
  // And around 50 mores...
}

interface File {
  fileName: string,
  metadata: FileMetadata
}

const file = defineModel<File>({ required: true });

const buildControls = (metadata: FileMetadata) => {
  return [
    {
      label: 'Owner',
      model: metadata,  // Correct so?
      type: 'text',
      field: "owner"
    },
    {
      label: 'Location',
      model: metadata,  // Correct so?
      type: 'text',
      field: "location"
    },
    {
      label: 'Size',
      model: metadata,  // Correct so?
      type: 'number',
      field: "size"
    },
    // And around 50 mores...
  ];
};

const controls = buildControls(file.value.metadata);  // Value is already unpack here
</script>

<template>
  <div v-for="item in controls">
    <v-text-field v-model="item.model[item.field]" :label="item.label" :type="item.type" />
  </div>
</template>