Vue.js - Use v-for with dynamic range value

Question

Maybe I'm going about this the wrong way ... but I'm trying to use a v-for loop to duplicate/remove a custom component x times. x is decided by a <select> field above. What I have works on the initial page load, but then when you select a different option, only one custom component is displayed (although x is updated). Does anyone have any idea what I am doing wrong?

// here is the select field that defines the number of enrolling students
<select name="number_students_enrolling" v-model="formFields.numberStudentsEnrolling">
    <option value="" default selected></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

// here is the custom component I'm trying to duplicate/remove dynamically
<div class="students-container">
    <student v-for="n in formFields.numberStudentsEnrolling" :key="n" v-bind:index="n" >
    </student>
</div>

// here is the custom component
Vue.component('student', {
  props: ["index"],
  template: `
    <div class="input--student">
      <div class="input--half">
        <label>
          <span class="d-block">
            Student {{ index }} Name <span class="field--required">*</span>
          </span>
          <input type="text">
        </label>
      </div>
      <div class="input-wrap input--half">
        <label>
          <span class="d-block">
            Student {{ index }} DOB <span class="field--required">*</span>
          </span>
          <input type="text">
        </label>
      </div>
    </div>
  `
})

// Here is the Vue.js instance
var test = new Vue({
  el: '#test',
  data: { 
    formFields: {
      numberStudentsEnrolling: 3
    }
  }
});

Answer 1

v-for needs a Number, but you're giving it a string (the selected value). Convert it to a Number so v-for will treat it as a range from 1 to N:

<div class="students-container">
    <student
        v-for="n in Number(formFields.numberStudentsEnrolling)"
        :key="n"
        v-bind:index="n">
    </student>
</div>

For completeness, another approach (per @HusamIbrahim) is to annotate the v-model reference with .number, which will automatically do the conversion.

<select
    name="number_students_enrolling"
    v-model.number="formFields.numberStudentsEnrolling"
>

Here's a codesandbox: https://codesandbox.io/s/xzy6or9qo