5강 숙제로 내주신 것 코드가 작동하지 않습니다

신고버튼 3개 만들어오라고 하신 것 똑같이 작성했는데 저는 허위매물신고를 눌러도 신고수가 증가하지 않습니다.

그 이유를 모르겠습니다.

<template>
  <div>
    <div class="menu">
      {{ menuName }}
    </div>
    <div>
      <h4 class="red" :style="style1">{{ products[0] }}</h4>
      <p>50만원</p>
      <button @click="reportNumber[0]++">허위매물신고</button>
      <span>신고수 : {{ reportNumber[0] }}</span>
    </div>
    <div>
      <h4 class="red" :style="style1">{{ products[1] }}</h4>
      <p>60만원</p>
      <button @click="reportNumber[1]++">허위매물신고</button>
      <span>신고수 : {{ reportNumber[1] }}</span>
    </div>
    <div>
      <h4 class="red" :style="style1">{{ products[2] }}</h4>
      <p>70만원</p>
      <button @click="reportNumber[2]++">허위매물신고</button>
      <span>신고수 : {{ reportNumber[2] }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      reportNumber: [1, 2, 3],
      price1: [60, 50, 70],
      style1: "color:red",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      menuList: ["Home", "Shop", "About"],
    };
  },
  methods: {
    increaseReportNumber(index) {
      this.reportNumber[index]++;
    },
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}
</style>