Add multiple inputs to nested array

I want to create an array of informations. Each information contains an object as a title with 3 different languages and multiple values, where each value also contains 3 different languages.

With the help of this question, I've managed to add multiple informations with their own title and their first value. However, I have problems adding more values to each information. So we are looking at the addValue() function. Here I want to add the new value object in informations[infIndex].values, but I really have no idea how to do it. With push() or slice() I get informations[infIndex].values.slice is not a function.

Html

    <div class="informations">
      <h1>Informations</h1>
      <div v-for="(information, infIndex) in informations" :key="infIndex">
        <p>Title</p>
        <input v-model="information.title.en" placeholder="EN" />
        <input v-model="information.title.fr" placeholder="FR" />
        <input v-model="information.title.de" placeholder="DE" />

        <div
          v-for="(value, valIndex) in informations[infIndex].values"
          :key="valIndex"
        >
          <p>Values</p>
          <input v-model="value.en" placeholder="EN" />
          <input v-model="value.fr" placeholder="FR" />
          <input v-model="value.de" placeholder="DE" />
          <button @click="addValue(infIndex, valIndex)">Add Value</button>
        </div>
      </div>
      <button @click="addInformation()">Add Information</button>
      <pre>{{ informations }}</pre>
    </div>

Script setup

const informations = reactive([
  {
    title: {
      en: '',
      fr: '',
      de: '',
    },
    values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },
  },
])

function addInformation() {
  informations.push({
    title: {
      en: '',
      fr: '',
      de: '',
    },
    values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },
  })
}

function addValue(infIndex, valIndex) {
  informations[infIndex].values.splice(valIndex, 0, {
    value: {
      en: '',
      fr: '',
      de: '',
    },
  })
}

You're treating informations[infIndex].values like an array but you've declared it as an object:

values: {
      value: {
        en: '',
        fr: '',
        de: '',
      },
    },

valIndex is not an actual index number, it's an object key, because you're calling v-for with an object:

<div
  v-for="(value, valIndex) in informations[infIndex].values"
  :key="valIndex"
>

It would be easiest to just change values to initially be an array, and I would get rid of the value key as well so it's just a simple array of objects:

const informations = reactive([
  {
    title: {
      en: '',
      fr: '',
      de: ''
    },
    values: [
      {
        en: '',
        fr: '',
        de: ''
      }
    ]
  }
]);

function addInformation() {
  informations.push({
    title: {
      en: '',
      fr: '',
      de: ''
    },
    values: [
      {
        en: '',
        fr: '',
        de: ''
      }
    ]
  });
}

function addValue(infIndex) {
  informations[infIndex].values.push({
    en: '',
    fr: '',
    de: ''
  });
}