Vue registered new word clashing with other existing word

[sahdan96]

So I code some translation dictionary using quasar framework and vue js. There is two option to add word- simple mode and advanced mode. I use simple mode to add word. Then word come out turn out clash with other word(advanced). is there any wrong with api or what?

Add word mode:

the submit code:

function onSubmit () {
      console.log('onSubmit', state.doc)
      const apiUrl = '/api/word'
      state.doc.username = globalState.username
      state.doc.images = state.images
      axios.post(apiUrl, state.doc)
        .then(res => {
          console.log(res)
          Dialog.create({
            cancel: true,
            persistent: true,
            title: 'Thanks for your contribution!',
            message: `New word ${state.doc.word.toUpperCase()} has been accepted.`
          }).onOk(() => {
            router.push({ path: '/entries' })
          })
        })
        .catch(err => {
          console.error(err)
          state.error = true
          setTimeout(() => {
            state.error = false
          }, 4000)
        })
    }

    function uploadFile (blob, mode) {
      state.loading = true
      const formData = new FormData()
      formData.append('file', blob)
      formData.append('upload_preset', 'app_name')

      const config = {
        url: 'url_here/upload',
        method: 'POST',
        data: formData
      }
      axios(config)
        .then((res) => {
          console.log('upload photo', res)
          const publicId = res.data.public_id
          const url = `url_here/c_fill,q_auto,f_auto/${publicId}`
          state.images[mode] = url
          state.loading = false
        })
        .catch((err) => console.error(err))
    }