How do i get the v-model values of a v-for components if i iterate with only numbers?

Question

I have v-for form-group components i iterated over a select's value(integer). I want to get the values of the iterated v-models, but i just can't seem to get it right

TEMPLATE
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

SCRIPT DATA
   data() {
    return {
      form: {
        jumlahlow: 1,
        checked: [],
        low: []
      } 
    }

I've tried changing the model to low[n] or declaring low in data as object {} but either of these seems to be undefined according to TypeErrors i've encoutered.

How am i suppose to get the low[n]'s values?

EDIT:

Here is the full code:

<template>
  <div>
    <b-form @submit="onSubmit" @reset="onReset">
      <b-form-group
        id="input-group-1"
        label="Jumlah Lowongan:"
        label-for="selectJumlahLow"
        description="Silahkan pilih satu."
        v-if="show"
      >
        <b-form-select id="selectJumlahLow" v-model="form.jumlahlow" :options="selow" required></b-form-select>
      </b-form-group>

      <b-form-group label="Nama Lowongan:" v-for="n in parseInt(form.jumlahlow)" :key="n">
        <b-form-input required placeholder="Masukkan nama lowongan" v-model="low"></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">
        {{ buttonText }}&nbsp;
        <i class="material-icons">arrow_forward_ios</i>
      </b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

<script>
export default {
  name: "lowonganForm",
  data() {
    return {
      form: {
        jumlahlow: 1,
        checked: [],
        low: []
      },
      selow: [
        { text: "Pilih Satu", value: null, disabled: true },
        1,
        2,
        3,
        4,
        5,
        6
      ],
      show: true,
      target: false,
      buttonText: "Next"
    };
  },
  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
      //   if (this.jumlahlow !== null || !this.jumlahlow < 1) {
      //     this.show = false;
      //   }
    },
    onReset(evt) {
      evt.preventDefault();
      // Reset our form values
      this.form.jumlahlow = null;
      this.form.checked = [];
      // Trick to reset/clear native browser form validation state
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    }
  },
  computed: {}
};
</script>

Answer 1

Try this example.

<div id="app">
  <div>
    <select v-model="jumlahlow">
      <option v-for="i in selects" :key="i">{{ i }}</option>
    </select>
  </div>
  <div v-for="num, index in parseInt(jumlahlow)">
    <input v-model="lows[index].value" />
  </div>
</div>

And JS

new Vue({
  el: '#app',
  data: {
      lows: [
        {
        value: ''
      }
    ],
    jumlahlow: 1,
    selects: [
            1,
        2,
        3,
        4,
        5,
        6
    ]
  },
  watch: {
    jumlahlow: function (val) {
        this.lowsTmp = this.lows;
        this.lows = [];
        for (let i = 0; i < val; i++) {
        const currentVal = typeof this.lowsTmp[i] !== 'undefined' ? this.lowsTmp[i].value : '';
        this.addLow(currentVal);
      }
    }
  },
  methods: {
    addLow: function(val) {
        this.lows.push({ value: val });
    }
  }
})

Directly check here: https://jsfiddle.net/abinhho/m3c8r4tj/2/