Can't apply multiple formats using rich text in Lexical.js

Question

I am trying to make a text editor in Vue using Lexical. Here is my basic setup: App.vue:

<template>
  <div class="wrapper">
    <h1>Lexical bug</h1>
    <div id="editor" contenteditable="true" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import {
    createEditor,
    type CreateEditorArgs,
} from 'lexical'

import {
    registerRichText,
} from '@lexical/rich-text'

const EMPTY_STATE = '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}'

const config: CreateEditorArgs = {
    editable: true,
    namespace: 'editorie',
    theme: {
        paragraph: 'editor-paragraph'
    },
    onError: console.error
};

const editor = createEditor(config)

const parsed_state = editor.parseEditorState(EMPTY_STATE)

editor.setEditorState(parsed_state)

registerRichText(editor)

onMounted(() => {
    editor.setRootElement(document.getElementById('editor'));
})
</script>

<style>
.wrapper {
  display: grid;
  gap: 20px;
}
#editor {
  width: 800px;
  background-color: #f7f7f7; 
}
</style>

But the problem is that only one modifier is applying at a time. How does it look like:

1. Type something into editor
2. Try to apply bold by pressing ctrl+B
3. Text will become bold
4. Apply italic to the same selection by pressing ctrl+I
5. Nothing will be changed
6. Press ctrl+B again
7. Bold will be removed and the italic will be "revealed"

Very strange behavior, but I guess there is a problem with my setup.

You can see live demo here (I know that this isn't a best practice here): https://stackblitz.com/~/github.com/Rusinas/lexical-rich-text-bug