Vue Js Check if Element contains a specific CSS Class Name

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue.js Check If Element Contains A Specific CSS Class Name</h3>
    <div id="my-element" class="example-class">
      This is Element
    </div>
    <div v-if="elementContainsClass" class="contains-class">
      Element contains the class "example-class"
    </div>
    <div v-else class="does-not-contain-class">
      Element does not contain the class "example-class"
    </div>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          elementContainsClass: false
        };
      },
      mounted() {
        this.checkIfElementContainsClass();
      },
      methods: {
        checkIfElementContainsClass() {
          const element = document.getElementById('my-element');
          if (element.classList.contains('example-class')) {
            this.elementContainsClass = true;
          } else {
            this.elementContainsClass = false;
          }
        }
      }
    });
    app.mount("#app");
  </script>
  <style>
    #app {
      margin: 0 auto;
      width: 500px;
      text-align: center;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

#my-element {
      padding: 10px;
      border: 2px solid #3498db;
      border-radius: 5px;
      margin: 10px 0;
    }

.contains-class {
      color: #4CAF50;
      font-weight: bold;
    }

.does-not-contain-class {
      color: #D9534F;
      font-weight: bold;
    }
  </style>
</body>

</html>