如何为循环Vue中的每个子对象设置不同的状态变量

<!-- 父组件 -->
<template>
  <div>
    <child-component
      v-for="item in itemList"
      :key="item.id"
      :item="item"
    ></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      itemList: [
        { id: 1, name: '子对象1', status: 'normal' },
        { id: 2, name: '子对象2', status: 'warning' },
        { id: 3, name: '子对象3', status: 'error' },
      ],
    };
  },
};
</script>

<!-- 子组件 -->
<template>
  <div :class="computedStatus">
    <span>{{ item.name }}</span>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    computedStatus() {
      switch (this.item.status) {
        case 'normal':
          return 'normal-class';
        case 'warning':
          return 'warning-class';
        case 'error':
          return 'error-class';
        default:
          return '';
      }
    },
  },
};
</script>

<style scoped>
.normal-class {
  color: green;
}

.warning-class {
  color: orange;
}

.error-class {
  color: red;
}
</style>