[Vuejs]-Chart Js doesn't update the values in the first load

topics need to be Vue’s data to make it reactive. Please try:

 export default {
    extends: Pie,
    props: ['chartdata', 'options'],
    data() {
        return {
            topics: [0, 0, 0, 0]
        }
    },
    mounted () {
      postss.on('value', this.gotData, errData);
      this.renderChart({
        labels: ['Politics','Software','History','Travel'],
        datasets: [
          {
            label: 'Topics',
            backgroundColor: ['red','green','brown','blue'],
            data: [this.topics[0], this.topics[2], this.topics[3], this.topics[1]]
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    },
    methods: {
        gotData(data)  {
            let topics = [0, 0, 0, 0]
            let categori = data.val();
            let keys = Object.keys(categori);
            for(let i = 0; i < keys.length; i++){
                let k = keys[i];
                let categoriezz = categori[k].categories;
                for(let dates = 0; dates < categoriezz.length; dates++){
                    if(categoriezz[dates] == "Politics"){
                        topics[0]++;
                    }
                    else if(categoriezz[dates] == "Travel"){
                        topics[1]++;
                    }
                    else if(categoriezz[dates] == "Software"){
                        topics[2]++;
                    }
                    else if(categoriezz[dates] == "History"){
                        topics[3]++;
                    }
                }
                //console.log(categoriezz,politics,travel,software,history);
            }
            this.topics = topics
        }
    }
  }