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

为了创建一个简单的Vue成绩录入系统，我们可以按照以下步骤设计：

首先，我们创建一个Vue组件，名为`ScoreInput.vue`：

<template>
  <div id="score-input">
    <input type="number" v-model="currentScore" min="60" max="100" placeholder="请输入分数" />
    <button @click="addScore">添加分数</button>
    <p>已输入的成绩：{{ scores }}</p>
    <p>平均分：{{ averageScore }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentScore: null,
      scores: [],
    };
  },
  methods: {
    addScore() {
      if (this.currentScore && this.currentScore >= 60 && this.currentScore <= 100) {
        this.scores.push(this.currentScore);
        this.currentScore = null;
        // 更新平均分，这里使用了 computed property 和 watch 来简化
        this.$set(this, 'averageScore', this.calculateAverage());
      } else {
        alert('输入无效，请输入60到100之间的分数！');
      }
    },
  },
  computed: {
    averageScore() {
      if (this.scores.length > 0) {
        let sum = 0;
        for (let score of this.scores) {
          sum += score;
        }
        return sum / this.scores.length;
      } else {
        return 0;
      }
    },
  },
  watch: {
    scores(newScores) {
      // 当scores数据变化时自动更新平均分
      this.averageScore = this.calculateAverage();
    },
  },
  methods: {
    calculateAverage() {
      // 计算平均值函数，只用于初始化平均分计算
      if (this.scores.length === 0) {
        return 0;
      }
      let sum = 0;
      for (let score of this.scores) {
        sum += score;
      }
      return sum / this.scores.length;
    },
  },
};
</script>

这个组件会有一个输入框让用户输入分数，每次输入并点击“添加分数”按钮后，新分数会被添加到数组`scores`中，并且平均分会在下方显示。由于我们在`methods`里进行了即时计算并在`watch`里设置了对`scores`数组变化的监听，所以平均分会随着输入的变化而实时更新。