I have this vue method that takes input vales from user and generates a json object before it performs the axios put request. My issue is that the json object generated is returning numbers as strings, and that breaks my API response. My goal is for my json object to be like this:

{
  "test":{
    "test1":{
      "test2":2,
      "test3": 2
    }
  }
}

On current code, json object returns like this (2 as string):

{
  "test":{
    "test1":{
      "test2":"2",
      "test3":"2"
    }
  }
}

This is my vue method:

generateJson() {
  const values = {}

  this.inputs.forEach((item) => {
    values[item.key] = item.value
  })

  const jsonFile = {
    test: {
      test1: values
    }
  }

    const testUrl = '*URL placeholder*'

    axios.put(testUrl, jsonFile).then((response) => {
      console.log(response.data)
    })
  }
}

This is the user input field:

    <button @click.prevent="showInput">+</button>
    <div v-for="(input, k) in inputs" :key="k">
        <input v-model="input.key" type="text" @change="getKey($event)" />
        <input
              v-model="input.value"
              type="text"
              @change="getValue($event)"
            />
    </div>

</div>
<button @click.prevent="generateJson">Submit</button>

And here is the other two methods that i use to get the value from input:

data() {
  return {
    tempkey: '',
    tempValue: '',
  }
}
getKey(e) {
  this.tempkey = e.target.value
},
getValue(e) {
  this.tempValue = e.target.value
},

Anyone can advise what i can do to make this work? Many thanks.