ckeditor 5 heading plugin won't work

[NEBA0317]

i want to edit this text to heading 1

but it didn't work

this is my editor component

<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'
import Heading from '@ckeditor/ckeditor5-heading/src/heading'
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'
import Image from '@ckeditor/ckeditor5-image/src/image'
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption'
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle'
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar'
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload'
import Link from '@ckeditor/ckeditor5-link/src/link'
import List from '@ckeditor/ckeditor5-list/src/list'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'

export default {
    name: "Editor",
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                plugins: [
                    Essentials,
                    Bold,
                    Italic,
                    BlockQuote,
                    Heading,
                    Base64UploadAdapter,
                    Image,
                    ImageCaption,
                    ImageStyle,
                    ImageToolbar,
                    ImageUpload,
                    Link,
                    List,
                    Paragraph,
                    Alignment
                ],
                toolbar: [ 
                    'heading',
                    '|',
                    'alignment',
                    'bold',
                    'italic',
                    'link',
                    'bulletedList',
                    'numberedList',
                    'uploadImage',
                    'blockQuote',
                    'undo',
                    'redo'
                ],
                image: {
                    toolbar: [
                        'imageStyle:full',
                        'imageStyle:side',
                        '|',
                        'imageTextAlternative'
                    ]
                },
            }
        };
    }
}
</script>

<style>

</style>

and this is my package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.20",
    "@amcharts/amcharts4-geodata": "^4.1.20",
    "@ckeditor/ckeditor5-basic-styles": "^28.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^25.2.3",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.2.3",
    "@ckeditor/ckeditor5-editor-classic": "^28.0.0",
    "@ckeditor/ckeditor5-essentials": "^28.0.0",
    "@ckeditor/ckeditor5-heading": "^28.0.0",
    "@ckeditor/ckeditor5-image": "^28.0.0",
    "@ckeditor/ckeditor5-link": "^28.0.0",
    "@ckeditor/ckeditor5-paragraph": "^28.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^28.0.0",
    "@ckeditor/ckeditor5-upload": "^28.0.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@headlessui/vue": "^1.2.0",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/line-clamp": "^0.2.1",
    "@tailwindcss/typography": "^0.4.1",
    "animejs": "^3.2.1",
    "axios": "^0.21.1",
    "core-js": "^3.14.0",
    "dotenv": "^10.0.0",
    "http2": "^3.3.7",
    "postcss-loader": "^3.0.0",
    "quill": "^1.3.7",
    "raw-loader": "^3.1.0",
    "style-loader": "^1.3.0",
    "vue": "^3.1.1",
    "vue-gapi": "^1.1.0",
    "vue-router": "^4.0.9",
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-alignment": "^28.0.0",
    "@ckeditor/ckeditor5-block-quote": "^28.0.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.1",
    "autoprefixer": "^9.8.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.11.1",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[Mgsy]

Hi, it looks like the heading is applied to the editor, so maybe there are some styles that change the heading's appearance? Could you review your CSS and see whether there is no conflict between them and the editor?