Vue.jsにおいて、データによってテキストの色を動的に変更したい。

クラスとスタイルのバインディングを使用してテキストの色を動的に変更する簡単なアプリを作ってみました。
期待している動作としては、教科のテスト結果を表示し、60点を下回るものに関しては、
赤文字で表現し、さらに”落第！”の文字を入れたいと思っています。
しかし、私が作成したプログラムでは、全てが赤文字で表示されてしまいます。
Nuxt.jsのフレームワークを使用しており、Typescriptで書いております。
どなたかご教示いただけませんでしょうか？

Vue.js
1<template>
2  <div>
3    <ul>
4      <li
5        v-for="item in list"
6        :key="item.id"
7        class="failure"
8        :class="{ failure: item.point < 60 }"
9      >ID:{{item.id}}/Subject:{{item.subject}}/Point:{{item.point}}
10        <span v-if="item.point < 60"
11          >落第！</span
12        >
13      </li>
14    </ul>
15  </div>
16</template>
17<script lang="ts">
18import { Component, Vue } from 'nuxt-property-decorator'
19
20@Component({})
21export default class extends Vue {
22  list = [
23    { id: 1, subject: 'Society', point: 40 },
24    { id: 2, subject: 'Math', point: 80 },
25    { id: 1, subject: 'Science', point: 70 },
26  ]
27
28}
29</script>
30<style scoped>
31.failure {
32  color: red;
33}
34</style>
35