vue.js2 同じv-btn上でforとifと実行させたい

前提

初めての質問となるため、不足の情報等ありましたら追記しますのでご教授願います。
vue.js2 / vuetify2で収益確認画面を作っています。
vueのドキュメントより以下の文言があったため実現の方法が思いつかず実装に悩んでおります。
v-if と v-for を同時に利用することは推奨されません。

実現したいこと

地区毎のボタンの色を収益状況に応じて変化させたいと考えています。
例）valが70未満なら赤、70-89ならオレンジ、90以上なら青のようなイメージです。

発生している問題・エラーメッセージ

エラーメッセージは特に発生していないのですが、コードがちゃんと反映されているようにも見えません。

該当のソースコード

vue.js2

<template> <ul> <div > <v-btn v-for="item of areaLists" v-bind:key="item.id" v-bind:val="item.val" v-bind:class="changeColor">{{ item.text }}</v-btn> </div> </ul> </template> <script> export default { data() { return { show: true, areaLists: [ { id: 0, text: '東北', val: 20 }, { id: 1, text: '関東', val: 40 }, { id: 2, text: '関西', val: 60 }, { id: 3, text: '中国', val: 80 }, { id: 4, text: '九州', val: 100 }, ]} }, methods: { changeColor() { return { changeColor: this.val >= 90 ? "white--text deep-blue" : "black--text deep-orange" } } } } </script>

試したこと

methodsのchangeColorの条件を変えて試してみたのですが、表示に反映はされませんでした。
初歩的な質問となってしまい申し訳ありませんが、何か手掛かりになるような情報を共有頂けますと有難いです。
よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

vue@2.7.8