请完成一个成绩录入系统，并实时统计平均分的小案例吧，可以用computed，methods和watch分别实现求平均分，其中初始成绩是空的，需要点击按钮一个个追加，成绩可以在60~100分之间随机生成

为了创建一个简单的成绩录入系统并实时计算平均分，我们将在Vue.js应用中使用`v-model`, `v-for`, `computed`, `methods`, 和 `watch`。假设我们在HTML部分有如下的结构：

<template>
  <div id="score-system">
    <input type="number" v-model="newScore" min="60" max="100" placeholder="请输入分数">
    <button @click="addScore">添加分数</button>
    <h2>当前平均分：{{ averageScore }}</h2>
    <ul>
      <li v-for="(score, index) in scores" :key="index">{{ score }} (索引: {{ index }}, 总数: {{ scores.length }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newScore: '',
      scores: [], // 初始成绩数组
      totalScore: 0, // 总分数
    };
  },
  methods: {
    addScore() {
      if (this.newScore && this.newScore >= 60 && this.newScore <= 100) {
        this.scores.push(this.newScore);
        this.totalScore += this.newScore;
        this.newScore = '';
      }
    },
  },
  computed: {
    averageScore() {
      return this.totalScore / this.scores.length || 0; // 防止除以零
    },
  },
  watch: {
    scores(newScores) {
      this.updateAverageScore();
    },
  },
  mounted() {
    this.updateAverageScore(); // 初始化平均分
  },
  methods: { // 私有方法，仅在内部使用
    updateAverageScore() {
      this.$set(this, 'averageScore', this.averageScore); // 使用$set更新避免触发视图更新导致无限递归
    },
  },
};
</script>

在这个例子中：
- `data()` 定义了数据模型，包括输入框值、成绩列表和总分。
- `methods.addScore` 在用户点击“添加分数”按钮时，检查新输入的分数是否有效，然后将新分数加入到数组中并更新总分。
- `computed.averageScore` 计算平均分，并在每次分数变动时自动更新。
- `watch.scores` 观察scores的变化，当分数发生变化时，会触发`updateAverageScore`方法更新平均分。
- `mounted()` 初始化平均分。