How to call these BootstrapVue component methods from watch?

I have a BootstrapVue table with the following code in a single HTML file;

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
    unchecked-value="not_enabled">
    Filter
  </b-form-checkbox>

  <b-input v-model="filter" placeholder="Filter table..."></b-input>
  <hr />
  <b-table :items="items" :filter="filter" :filter-function="filterFn">
  </b-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        filter: "",
        enable_filter: "enabled",
        items: [
          { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
          { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
          { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
          { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
          { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
        ]
      }
    },
    methods: {
      normalizeString(s) {
        return `${s}`.trim().toLowerCase();
      },
      filterFn(row) {
        console.log("filterFn()");
        let filtered_result = true;
        if (this.enable_filter === "enabled") {
          filtered_result = this.filter.split(',')
            .map(this.normalizeString)
            .some(
              term => Object.values(row)
                .map(this.normalizeString)
                .some(
                  val => val.indexOf(term) > -1
                )
            );
        }

        return filtered_result;
      },
      test_func()
      { 
        console("test_func()");        
      },
    },
    watch: {
      enable_filter()
      {
        console.log("watch checkbox filter");
        this.test_func();
        this.filterFn();
      },
  },    
  })
</script>

The table looks like this;

When the Search checkbox is clicked, enable_filter() inside watch will be run. Question is how do I call other methods such as test_func() and filterFn(row) inside enable_filter()? I did try calling the methods but I cannot see the output from console.log(). Did I do it correctly?

I am using BootstrapVue and vue.js v2.6

Solution

Check following snippet pls (you can check if filter is enabled and is it empty):)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
    unchecked-value="not_enabled">
    Filter
  </b-form-checkbox>

  <b-input v-model="filter" placeholder="Filter table..."></b-input>
  <hr />
  <b-table :items="items" :filter="filter" :filter-function="filterFn">
  </b-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        filter: "",
        enable_filter: "enabled",
        items: [
          { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
          { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
          { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
          { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
          { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
        ]
      }
    },
    methods: {
      normalizeString(s) {
        return `${s}`.trim().toLowerCase();
      },
      filterFn(row) {
        
        if (this.enable_filter === "enabled") {
        console.log("filterFn()", this.enable_filter);
          let filtered_result = true;
          if (this.enable_filter === "enabled" && this.filter) {
            filtered_result = this.filter.split(',')
              .map(this.normalizeString)
              .some(
                term => Object.values(row)
                  .map(this.normalizeString)
                  .some(
                    val => val.indexOf(term) > -1
                  )
              );
          }
          return filtered_result;
        }
      },
      test_func()
      { 
        console.log("test_func()");        
      },
    },
    watch: {
      enable_filter()
      {
        console.log("watch checkbox filter");
        this.test_func();
        this.filterFn();
      },
  },    
  })
</script>