Form inputs bound to initially empty array

I recently saw some code where a form input v-model was bound to an element of an array that was initialized as empty. I was thinking that this would violate reactivity when adding an element to an array using the index, after initialization.

But I built this test component based on that code, and it seems to work. If anyone has a solid explanation, I am interested in hearing it. Thanks.

<template>
  <div class="bind-empty-array">
    <h2>BindEmptyArray.vue</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group" v-for="(input, index) in inputs" :key="index">
        <label>{{ input.label }}</label>
        <input type="text" class="form-control" v-model="inputValues[index]">
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inputs: [
          {
            label: 'Input One'
          },
          {
            label: 'Input Two'
          }
        ],
        inputValues: []
      }
    },
    methods: {
      submitForm() {
        this.inputValues.forEach( element => console.log(element) )
      }
    }
  }
</script>