Is there any way to fix nested style issue in the ck-editor-5?

I have faced an issue in my vue.JS project while using CK Editor5. When i use the below HTML code in source editing (CK editor component) it shows an error like this. Please review the attached image. And I didn’t get the expected output from the editor.

Html content :

Sample text ABCDEFG, XYZ

[enter image description here](https://i.stack.imgur.com/5yTPq.png)

I have used below code in ck editor and i got the mentioned error.

<section>
    <div class="container">
        <div class="min-height-400">
            <p>
                Heading
            </p>
       <p><span  style="color:red"> Sample text <span class="has-text-white"> ABCDEFG</span>, XYZ </span></p>
        </div>
    </div>
</section>

Error:

ckeditorerror.js?4d68:118 Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at _iterableToArray (iterableToArray.js?5822:2:1)
    at _toConsumableArray (toConsumableArray.js?ab35:6:1)
    at mergeViewElementAttributes (conversionutils.js?9a8a:48:1)
    at dispatcher.on.priority (converters.js?94bb:104:1)
    at UpcastDispatcher.fire (emittermixin.js?0e61:199:1)
    at UpcastDispatcher._convertItem (upcastdispatcher.js?e583:249:1)
    at UpcastDispatcher._convertChildren (upcastdispatcher.js?e583:282:1)
    at UpcastDispatcher.eval (upcasthelpers.js?bb9b:783:1)
    at UpcastDispatcher.fire (emittermixin.js?0e61:199:1)
    at UpcastDispatcher._convertItem (upcastdispatcher.js?e583:249:1)