How do I trigger another binding to a Vue component

Question

I'm using vue-apollo to fetch data from backend and will bind the value into the components. When the first assignment of the local data, vue will send the data immediately to the following components and generate the template. But I will need to put an additional property to that object after that, but seems like the component won't generate new html although the data had changed.

new Vue({
    el: '#app',
    apolloProvider,
    components: {
      Category, Chart
    },
    data () {
        return {
            categories: null,
    },
    apollo: {
       getDatafromBackend() {
       ...
       ...,
       async result (result) {
            this.categories = await result.data.entriesWithinCategories.categories;
            this.total = result.data.entriesWithinCategories.total;

            return this.categories = await this.categories.map((category, index) => {
                category.color = randomColors[index];
                return category;
            });
          }
      },
})

v-bind in index.js

<Category v-for="category in categories" :key="category._id" :category="category" :total="total"></Category>

Category.vue

<template>
  <div>
    <h4 :style="{ color: category.color }" @click="toggle = !toggle">
      {{ category.name }} - {{ category.percentage }}% {{ category.color }}
    </h4>
  </div>
</template>

It won't print the category.color and console.log shows the value is undefined. My question is how do I trigger another binding when the data changed?