title: Vue state variable not updating
body: <p>I have this code but when the selectCategory method gets called i don’t see product.categories being updated in the vue dev console. </p>
  
  <pre><code>  &lt;li class="border hover:bg-blue-100" v-bind:class=""
                      v-on:click="selectCategory($event, category.id)"
                      &gt;
                      {{category.name}}
    &lt;/li&gt;
  
   export default {
    data () {
      return {
        product: {
          categories: []
        },
      }
    },
    methods: {
      selectCategory(event, id){
        this.product.categories.push(id);
      },
  }
  </code></pre>