<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="student in students" :key="student.id">{{ student.name }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    students: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ]
  }
});

new Vue({
  el: '#app',
  data: {
    students: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ]
  },
  computed: {
    sortedStudents: function() {
      return this.students.sort((a, b) => a.name.localeCompare(b.name));
    }
  }
});

<div id="app">
  <ul>
    <li v-for="student in sortedStudents" :key="student.id">{{ student.name }}</li>
  </ul>
</div>