【Vuetify】<v-avator>を使って背景色を動的に変更するサンプル

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
vuetify: 2.1.0

<template>
  <div>
    <v-avatar
      :color="avatorColor"
    >
    {{ displayName }}
    </v-avatar>
  </div>
</template>

<script>
  export default {
    name: 'SampleChild',
    //propsでv-avator部分を親コンポーネント側で動的に変更出来るようにする
    props: {
      displayName: '',
      avatorColor: '',
    }
  }
</script>

<template>
  <div>
    <!--配列numbersの要素数だけ表示する-->
    <div v-for="number in numbers" :key="number.id">
    <!--子コンポーネントがpropsで渡した２つの変数を親側で使用-->
      <SampleChild
       :avatorColor="color[number.name]"
       :displayName="number.name"
       >
      </SampleChild>
    </div>
  </div>
</template>

<script>
import SampleChild from './SampleChild';

export default {
  name: 'SampleParent',
  components: {
    SampleChild,
  },
  data() {
    return {
      //表示される配列
      numbers: [
        {id:1, name:1},
        {id:2, name:2},
        {id:3, name:3},
      ],
      //number.nameに応じて変わる背景色
      color: {
        1: 'yellow',
        2: 'blue',
        3: 'green',
      }
    }
  },
}
</script>

<template>
...略
</template>

<script>
//...略
  data() {
    return {
      numbers: [
        {id:1, n:2}, //ここのnを1->2へ変更
        {id:2, n:2},
        {id:3, n:3},
      ],
//...略
      }
    }
  },
}
</script>