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

在Vue.js中，我们可以创建一个简单的成绩录入系统和实时平均分计算功能。这里是一个基本的例子，我们将使用`v-model`绑定输入框，`push`方法追加成绩数组，`computed`计算平均分，以及`methods`添加事件处理函数：

<template>
  <div>
    <h2>成绩录入系统</h2>
    <input type="number" v-model.number="newScore" placeholder="请输入分数(60-100)">
    <button @click="addScore">添加成绩</button>
    <p>当前总分: {{ totalScore }}</p>
    <p>平均分: {{ averageScore }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scores: [], // 存储成绩数组
      newScore: '', // 新分数
    };
  },
  computed: {
    totalScore() {
      return this.scores.reduce((sum, score) => sum + score, 0);
    },
    averageScore() {
      if (this.scores.length === 0) return 0; // 如果无成绩，返回0
      return this.totalScore / this.scores.length;
    }
  },
  methods: {
    addScore() {
      if (!isNaN(this.newScore) && this.newScore >= 60 && this.newScore <= 100) { // 验证分数范围
        this.scores.push(this.newScore);
        this.newScore = ''; // 清空输入框
      } else {
        alert('请输入有效的分数（60-100）');
      }
    },
  },
  watch: {
    // 观察scores的变化，实时更新平均分
    scores(newScores) {
      this.averageScore = this.calculateAverage(newScores);
    }
  },
  methods: {
    calculateAverage(scores) {
      return scores.reduce((sum, score) => sum + score, 0) / scores.length;
    }
  },
};
</script>

在这个例子中，我们通过`data`初始化数据，`computed`用于计算总分和平均分，`methods`中定义了添加分数的逻辑并包含一个辅助方法用于计算平均分，而`watch`则监听`scores`变化来实时更新平均分。