title: Vue - Toggle state from external click
body: <ul>
  <li>I have a v-for loop of buttons (<strong>on click, the active state is toggled</strong>), </li>
  <li>and then I have a separate button '<strong>X Clear Filters</strong>', that resets my data.</li>
  </ul>
  
  <p>What I can't figure out, is how to set the current "active" states to false when I click the 'X Clear Filters' button. </p>
  
  <p>I have tried putting <code>isClicked = false</code>, in the <code>clearAllData</code> <strong>method</strong>, but that didn't work out. </p>
  
  <p>Any tips or solutions would be a great help. Thank you!</p>
  
  <p>I have the following set up:</p>
  
  <pre><code>    &lt;button v-for="catButton in categoryFilters" :key="catButton.id" 
            class="button button--link button--filter"
            :class="{ active: catButton.isClicked }"
            @click="loadSearchData(catButton.slug, catButton.isClicked = !catButton.isClicked)"
            ref="el"
      &gt;
                          {{ catButton.name }}
      &lt;/button&gt;
  </code></pre>
  
  <p>I then have another button to clear those selections that follows right after:</p>
  
  <pre><code>    &lt;button id="clear-all" v-on:click="clearAllData()"&gt;
            X CLEAR FILTERS
      &lt;/button&gt;
  </code></pre>
  
  <p>My current methods for those are as follows:</p>
  
  <pre><code>     loadSearchData(value){
           let self = this;
           if(categoriesArray.includes(value)){
               rmh_remove(categoriesArray, value);
           } else {
               categoriesArray.push(value);
           }
           self.postsData.page = 1;
           categorieString = (categoriesArray.length &gt; 0) ? categoriesArray.join('+') : self.$route.params.slug ;
           self.postsData['filter[category_name]'] = categorieString;
           self.getPosts();    
       },
       clearAllData(){
  
           console.log(this.$refs.el);
           this.postsData.page = 1;
           this.postsData['filter[category_name]'] = this.$route.params.slug;
           categorieString = this.$route.params.slug;
           categoriesArray = [];
           this.getPosts();
  
  
       }
  </code></pre>