Vue状态变量未更新

Question

我有这段代码，但是当调用selectCategory方法时，在vue开发人员控制台中看不到product.categories正在更新。

  <li class="border hover:bg-blue-100" v-bind:class=""
                    v-on:click="selectCategory($event, category.id)"
                    >
                    {{category.name}}
  </li>

 export default {
  data () {
    return {
      product: {
        categories: []
      },
    }
  },
  methods: {
    selectCategory(event, id){
      this.product.categories.push(id);
    },
}

Answer 1

     This might help you as referance.  

        <template>
         <div>
           <li v-for="category in Available.categories" 
               class="border hover:bg-blue-100" 
               v-bind:class=""                          
               v-on:click="selectCategory($event, category.id)"
           >
              {{category.name}}
          </li>
          </div>
       </template>

       <script>

         export default{
          data () {
            return {
              Available: {
                categories: [{
                  "name":"Fruites",
                  "id":1,
                },
                {
                  "name":"Veges.",
                  "id":2,
                }]
              },
               product: {
                categories: []
              },

            }
          },
          methods: {
            selectCategory(event, id){
              this.product.categories.push(id);
              console.log(this.product.categories)
            },
          }
        }
        </script>

https://codesandbox.io/s/vue-template-v2zss?fontsize=14