【自己解決】クラスのバインディングについて

【※自己解決しました。解決方法はコメント欄に記載染ました。】

お世話になります。
vue初心者です。

表題の件、質問させてください。

■概要

以下のVueの公式マニュアルを読みながら学習中です。

https://v3.ja.vuejs.org/guide/class-and-style.html

「オブジェクト構文」というセクションのコードを実際に書いて実行してみたのですが、解説通りに動作しませんでした。
私が書いたコードのどこかに誤りがありましたらご指摘いただければ幸いです。

■問題

クラスのバインディングについて期待値通りに出力されない。

↓期待値

<div class="static active"></div>

↓実行結果

<div id="class-vue" class="static" :class="{ active: isActive, 'text-danger': hasError }">

■私が書いたコード

<html>

<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="class-vue" class="static" :class="{ active: isActive, 'text-danger': hasError }">
        {{ isActive }}
        {{ hasError }}
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    isActive: true,
                    hasError: false
                }
            }
        }).mount("#class-vue")
    </script>
</body>

</html>

■実行して、出力されたhtml。

<html>

<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="class-vue" class="static" :class="{ active: isActive, 'text-danger': hasError }">
        {{ isActive }}
        {{ hasError }}
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    isActive: true,
                    hasError: false
                }
            }
        }).mount("#class-vue")
    </script>
</body>

</html>

■画面出力

image

■実行環境

  • vueバージョン
$ vue --version
@vue/cli 4.5.13
$ npm list vue
hello-world@0.1.0 /XXX/hello-world
└── vue@3.2.2 
  • ブラウザ
    Google Chrome

■コメント

画面にtrue、falseは出力されているので、プロパティは連携できていると思います。
なぜ、期待値通りに出力されないのか、誤りをご指摘いただければと存じます。

どうぞよろしくお願い致します。

自己解決しました。

■原因

お恥ずかしい話ですが、単にAppをマウントする階層と子階層の問題でした。
クラスのバインディングは関係ありませんでした。

■修正したソースコード

<html>

<head>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="class-vue">
        <div  class="static" :class="{ active: isActive, 'text-danger': hasError }">
            class1!
        </div>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    isActive: true,
                    hasError: true
                }
            }
        }).mount("#class-vue")
    </script>
    <style>
        .static {
            font-style: italic;
        }

        .active {
            font-size: xx-large;
        }

        .text-danger {
            color: red;
        }
    </style>
</body>

</html>

■実行結果

image