JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <h1>our mayor is {{result}}</h1>
  <ol>
    <li v-for="(mayor, index) in list">
      <span class="rank">{{index}}</span>
      <span class="name">{{mayor.name}}</span>
      <span class="voted">{{mayor.voted}}</span>
      <button type="button" @click="mayor.voted++">Vote</button>
    </li>
  </ol>
  <input type="text" placeholder="'delete키를 누르면 reset됩니다.'" @keyup.delete="reset">
  
</div>

CSS

*{margin:0;padding:0;list-style:none;}

JavaScript

new Vue({
  el: '#container',
  data: {
    list: [
      {
        name: 'Mr. Black',
        voted: 0
      },
      {
        name: 'Mr. pink',
        voted: 0
      },
      {
        name: 'Mr. white',
        voted: 0
      },
      {
        name: 'Mr. Brown',
        voted: 0
      }
    ]
  },
  computed: {
    result: function() {
      let list = [...this.list];
      let listResult = list.sort(function(a, b){
        if(a.voted < b.voted) {
          // 값이 큰 경우 
          return 1
        }else if(a.voted > b.voted){
          // 값이 작은 경우 
          return -1
        }

        // 값이 같은 경우
        return 0
        });
        
      return listResult[0].name;
    }
  },
  methods: {
    sum: function() {
      console.log(this);
    },
    reset: function() {
      for(let key of this.list) {
        key.voted = 0;
      }
    }
  }
});