Vue js gallery filter

Hi, i have created a product gallery filter. currently i am using some variable that is defined in my script using the data: {} object, but when it will be dynamic, ( the category will come from database and will pass to the view from a laravel controller ), i don't have the ability to set variables for them. can anyone please help me to solve this barrier.

here the "diqualify" class just reduces the opacity of that section.

                      <ul class="category-filter">
                            <li :class="{ selected: categoryFilter.all }">
                                <a href="#" @click.prevent="setCategory('all')">Category</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.food) ? 'selected' : ''">
                                <a href="#" @click.prevent="setCategory('food')">Food</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.toy) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('toy')">Toy</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.verity) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('verity')">Verity</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.allergy) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('allergy')">Allergy</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.chicken) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('chicken')">Chicken</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.turkey) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('turkey')">Turkey</a>
                            </li>
                            <li :class=" (!categoryFilter.all && categoryFilter.beef) ? 'selected': ''">
                                <a href="#" @click.prevent="setCategory('beef')">Beef</a>
                            </li>
                            <div class="clearfix"></div>
                        </ul>




                    <div class="row">

                        <div class = "col-xs-12 gallery-block" :class="{disqualified: !categoryFilter.food && !this.categoryFilter.all}">

                            <h2 class="text-danger gallery-name">Food</h2>

                <!-- my products are here 

                            <ul class="foods">
                                <li class="col-sm-6 col-md-4 col-xs-12" v-for="product in foodProducts">
                                </li>

                            </ul>

             -->

                        </div>


                    </div>
                <!-- /food-gallery -->


                <!-- section toy -->
                <div class="row">

                    <div class="col-xs-12 gallery-block" :class="{disqualified: !categoryFilter.toy && !this.categoryFilter.all}">

                        <h2 class="text-danger gallery-name">Toy</h2>

                    </div>


                </div>


                <!-- /section toy -->

                <!-- section variety -->
                <div class="row">

                    <div class="col-xs-12 gallery-block" :class="{disqualified: !categoryFilter.verity && !this.categoryFilter.all}">

                        <h2 class="text-danger gallery-name">Variety</h2>

                    </div>


                </div>

                <!-- section variety -->


            </div>

and here is the vue scripts so far:

var app = new Vue({
    el: '.wrapper',
    data: {

        categoryFilter: {
            all: 1,
            food: 0,
            toy: 0,
            verity: 0,
            allergy: 0,
            chicken: 0,
            turkey: 0,
            beef: 0
        }

    },

    methods: {

       /* category filter */

        setCategory: function(category_name){

            if(category_name != 'all'){

                this.categoryFilter.all = 0;
                this.categoryFilter[category_name] = !this.categoryFilter[category_name];

            }else{
                this.categoryFilter.all = 1;

            }

        },

}

}

Any help is highly appreciated.

With Thanks Fahad