title: Vue.js - Watch data changes
body: <p>I added a Bootstrap Vue Table to my app and wanted to log when the user switches to another page using the built in pagination. </p>
  
  <p><a href="https://bootstrap-vue.js.org/docs/components/table/" rel="nofollow noreferrer">https://bootstrap-vue.js.org/docs/components/table/</a></p>
  
  <p>For this, I added a <code>@change</code> that is supposed to listen and log the v-model of the pagination, <code>currentPage</code>. However, it seems to be called before <code>currentPage</code> is actually updated.</p>
  
  <p>How can I properly listen to this updating? </p>
  
  <p>This is what I have tried:
  <a href="https://jsfiddle.net/eywraw8t/394424/" rel="nofollow noreferrer">https://jsfiddle.net/eywraw8t/394424/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
     totalRows: 50,
     perPage: 10,
     currentPage: 1
    },
    methods: {
     pagination() {
       console.log(this.currentPage);
      },
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;
    &lt;div&gt;
      &lt;b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" @change="pagination" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>