I make a vue application to use bpmnio/form-js-viewer, there is an object structure error when compiling the App.vue file. Could someone make any suggestions, Thanks.

<template>
  <div id="form">

  </div>
</template>

<script>
  import { Form } from '@bpmn-io/form-js-viewer'

  export default {
    name: 'App',
    setup() {
      const schema = {
        components: [
          key: 'creditor',
          label: 'Creditor',
          type: 'textfield',
          validate: {
            required: true,
          }
        ]
      }
    }
  }
</script>

The error information is below:

The package.json file is below:

{
  "name": "designer",
  "version": "0.0.1",
  "description": "form designer software",
  "productName": "form designer app",
  "author": "besley",
  "private": true,
  "scripts": {
    "test": "echo "No test specified" && exit 0",
    "dev": "quasar dev",
    "build": "quasar build"
  },
  "dependencies": {
    "@bpmn-io/form-js-viewer": "^1.8.8",
    "@quasar/extras": "^1.16.4",
    "@vue/compiler-sfc": "^3.4.34",
    "axios": "^1.7.0-beta.2",
    "jquery": "^3.7.1",
    "mitt": "^3.0.1",
    "quasar": "^2.16.0",
    "vue": "^3.4.18",
    "vue-router": "^4.0.12",
    "vue-uuid": "^3.0.0",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@quasar/app-vite": "^1.9.0",
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.14"
  },
  "engines": {
    "node": "^20 || ^18 || ^16",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}