title: I have to check a checkbox twice before it runs the function. Vuejs
body: <p>I want to run a function every time an input field changes, it works for a text and email input fields but not for checkbox?</p>
  
  <p>These are the HTML tags, when I change the text input field or the email input field, the function runs okay.. However, when I check the box I have to click it twice before it takes effect, the first click keeps the <code>show_pending</code> false.</p>
  
  <pre><code>        &lt;input type="text" v-model="search.name" @input="getBusinessUsers()" placeholder="Search by name" class="form-control"&gt;
          &lt;input type="email" v-model="search.email" @input="getBusinessUsers()" placeholder="Search by email" class="form-control"&gt;
          &lt;input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @input="getBusinessUsers()"&gt;
          &lt;label class="form-check-label" for="checkbox"&gt;Show pending users&lt;/label&gt;
  </code></pre>
  
  <p>This is the data model:</p>
  
  <pre><code>    data() {
          return {
              users: [],
              search: {
                  name: null,
                  email: null,
                  show_pending: false,
              },
          }
      },
  
  
          &lt;input class="form-check-input" type="checkbox" id="checkbox" v-model="search.show_pending" @input="getBusinessUsers()"&gt;
          &lt;label class="form-check-label" for="checkbox"&gt;Show pending users&lt;/label&gt; 
  </code></pre>
  
  <p>And this is the function I'm trying to run:</p>
  
  <pre><code>        getBusinessUsers(){
              this.users = [];
              let component = this;
  
              let pageNum = this.pageNum;
              let search = this.search
  
  
              var endpoint = '/businesses?page='+pageNum;
  
  
              Object.keys(search).forEach((key) =&gt; (search[key] == null) &amp;&amp; delete search[key]);//remove empty params
  
              Object.keys(search).forEach(function(item) {
                  console.log(item, search[item]);
                  endpoint += "&amp;" + item + "=" + search[item];
              });//append non empty params to endpoint to fetch all users
              console.log(endpoint);
  
              this.$http.get(endpoint).then(response =&gt; {
                  console.log(response.data);
                  let pagination = response.data.meta.pagination;
  
                  this.pageCount = pagination.total_pages;
                  response.data.data.forEach(function (user) {
                      user.edit = false;
                      component.users.push(user);
                  })
              }).catch(function (error) {
                  console.log(error);
              });
          },
  </code></pre>