Диаграмма JS не обновляет значение

Question

Я пытался обновить значения в соответствии со значениями из моей базы данных Firebase.Хотя я мог отображать обновленные значения через консоль, функция не может изменить значения, которые были назначены в начале.Как я могу решить эту проблему?

let app = firebase.initializeApp(firebaseConfig);
let postss = app.database().ref('posts');
let politics = 0;
let software = 0;
let history = 0;
let travel = 0;

function gotData(data){
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"){
        politics++;
      }
      else if(categoriezz[dates] == "Travel"){
        travel++;
      }
      else if(categoriezz[dates] == "Software"){
        software++;
      }
      else if(categoriezz[dates] == "History"){
        history++;
      }
    }
      //console.log(categoriezz,politics,travel,software,history);
}
console.log(politics,travel,software,history);
}

function errData(err){
console.log(err);
}

export default {
  extends: Pie,
  props: ['chartdata', 'options'],
  mounted () {
    postss.on('value', gotData, errData);
    this.renderChart({
      labels: ['Politics','Software','History','Travel'],
      datasets: [
        {
          label: 'Topics',
          backgroundColor: ['red','green','brown','blue'],
          data: [politics, software, history, travel]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}
</script>

edit: я обнаружил, что всякий раз, когда меняю страницу с помощью панели навигации, она повторяет и обновляет график в соответствии с этими значениями.Единственная проблема заключается в том, что он не обновляет значения во время первой загрузки страницы.