Никакие атрибуты трогать в данном случае не надо, да и не нужны они.
Добавляем два свойства в data - возможные значения, и выбранное значение:
data: () => ({
selectedPercent: null,
percents: [ 30, 40, 50 ],
...
}),
Разметку создаём на основе данных; обработка клика - нужное значение сразу доступно, так что просто выполняем присваивание:
<div v-for="p in percents" @click.prevent="selectedPercent = p">
...
Делаем вычисляемое свойство, представляющее заголовок - выбранное значение, а если его нет, подставляем какую-то дефолтную строку:
computed: {
header() {
return this.selectedPercent !== null ? this.selectedPercent : 'hello, world!!';
},
},
Ну и выводим его:
<h1>{{ header }}</h1> 
Средний
