I'm getting the error in vue.js - Unexpected side effect in "filteredTeamsData" computed property

Question

Unexpected side effect in "filteredTeamsData" computed property

I have imported the two JSON file

1. import seasonList from '../assets/data/season_list.json'
2. import team data from '../assets/data/match_team.json'

Code -

export default {
  name: 'SeasonSplit',
  components: {
       TableElement,
        },
    data () {
    return {
      selected: '1',
      teamData: teamData,
      teamList: [],
      seasonList: seasonList,
      filteredData: [],
      tableColumns: ['toss_wins', 'matches', 'wins', 'losses', 'pts']
    }
  },
  computed: {
      filteredTeamsData: function () {
        this.dataArr = []
        this.filteredData = []
        this.teamList = []
        teamData.forEach(element => {
            if(element.season == seasonList[this.selected-1]){
              this.filteredData.push(element)
              this.teamList.push(element.team)
              this.dataArr.push(element.wins)
            }
        })
        // console.log(this.filteredData)
        return this.dataArr
      }
  }
}

Answer 1

I'd do it as follows:

export default {
  name: 'SeasonSplit',
  components: {
       TableElement,
        },
    data () {
        let filteredData = [];
        let teamList = [];
        let dataArr = [];
        teamData.forEach(element => {
            if(element.season == seasonList[this.selected-1]){
              filteredData.push(element)
              teamList.push(element.team)
              dataArr.push(element.wins)
            }
        });
    return {
      selected: '1',
      teamData: teamData,
      teamList: teamList ,
      seasonList: seasonList,
      filteredData: filteredData ,
      tableColumns: ['toss_wins', 'matches', 'wins', 'losses', 'pts'],
      filteredTeamsData: dataArr
    }
  }