Как это работает? Аргумент :class в дерективе во Vue3

<script setup>
  import { ref } from 'vue';
  const titleClass = ref('title');
</script>

<template>
  <h1 :class='titleClass'>Red!</h1>
</template>

<style scoped>
  .title {
    color: red;
  }
</style>

Я не могу понять как это работает. Как именно реф получает текст с h1? Применяется ли стиль ко всем тегам этого типа, или же к нему? Можете подробно обьяснить, я может и понимаю. Но хотел бы услышать мнение профессионалов.