JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <label>
    <input v-model="sortActive" type="checkbox">
    Sort by name
  </label>
  
  <div v-for="user in (sortActive ? sortedUsers : users)">
    {{ user.name }}
  </div>
</div>

CSS

* {
  font-family: monospace;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    sortActive: false,
    users: [
      { name: 'маша' },
      { name: 'вера' },
      { name: 'толя' },
      { name: 'галя' },
      { name: 'Миша' },
      { name: 'Даша' },
      { name: 'тёма' },
      { name: 'Вика' },
      { name: 'Вова' },
      { name: 'Гена' },
      { name: 'Валя' },
      { name: 'Таня' },
      { name: 'ваня' },
      { name: 'паша' },
      { name: 'Петя' },
      { name: 'дима' },
      { name: 'Вася' },
    ],
  },
  computed: {
    sortedUsers() {
      return [...this.users].sort((a, b) => a.name.localeCompare(b.name));
    },
  },
});