ファイルアップロード時にファイル名を変更したい

Nuxt.jsでhoge.jpgというファイルをファイルアップロードする時にファイル名をavatars/hoge.jpgという名前に変更し、Google Cloud Storageのavatarsフォルダにファイルをアップロードできるようにしたいです。

そこでファイルオブジェクトを取得後、ファイル名を書き換えようとしたのですがTypeError: Cannot assign to read only property 'name' of object '#<File>'というエラーが表示されました。

何か解決策はございますでしょうか？

<template>
  <v-form>
    <div>
      <input
        ref="input"
        @change="onChange"
        type="file"
        accept="image/*"
        style="display:none"
      />
      <v-text-field
        @click="clickBtn"
        v-model="filename"
        label="画像ファイルを選択"
      />
    </div>
    <v-btn @click="upload">アップロード</v-btn>
  </v-form>
</template>
<script>
export default {
data()
  data() {
    return {
      file: {},
      filename: ''
    }
  },
  methods: {
    clickBtn() {
      this.$refs.input.click()
    },
    onChange(event) {
      this.file = event.target.files[0]
    },
    upload() {
      this.file.name = 'avatars/' + this.file.name
      const formData = new FormData()
      formData.append('user[avatar]', this.file)

      this.$axios
        .$put(`/users/${this.$store.$auth.user.id}`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then((response) => {
          console.log(response)
          alert('画像が変更されました。')
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>