Vue get element by attribute

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Get Element by Attribute</h3>
        <div ref="myElement" class="my-class" title="My Title">fontawesomeicons</div>
        <pre>{{myAttribute}}</pre>
    </div>

}
        })

app.mount('#app')
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.my-class {
            background-color: yellow;
            color: blue;
            font-size: 24px;
            padding: 10px;
        }

.my-class:hover {
            background-color: orange;
        }

/* styles for the "title" attribute */
        .my-class[title="My Title"] {
            border: 1px solid black;
        }

/* styles for the "ref" attribute */
        .my-class[data-ref="myElement"] {
            font-weight: bold;
        }
    </style>
</body>

</html>