<div id="app">
  <ul>
    <li v-for="item in arrayData">
      {{ item.name }} <input type="checkbox">
    </li>
  </ul>
  <button @click="arrayData.reverse()">反轉陣列</button>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

const vm = new Vue({
  el: "#app",
  data: {
    arrayData: [
      {
        id: 1,
        name: "test1",
      },
      {
        id: 2,
        name: "test2",
      },
      {
        id: 3,
        name: "test3",
      },
      {
        id: 4,
        name: "test4",
      },
    ],
  },
});