AG Grid: Framework component is missing the method isFilterActive()

Question

I am using "ag-grid-community": "^29.3.3", "ag-grid-vue3": "^29.3.3", with vue 3 composition api. This is custom filter component which i am using to filter columns in table.When i check some of the options in the filter it pop up this warning and it doesnt show that there is filter in this column.

<template>
  <div>
    <div class="custom-filter-wrapper">
      <div class="custom-filter-body">
        <label
          v-for="option in params.values"
          :key="option.value"
          class="options"
        >
          <input
            type="checkbox"
            :value="option"
            v-model="filterState"
            @change="updateFilter(option)"
          />
          {{ option }}
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from "@vue/reactivity"
  const { params } = defineProps();
  const { field } = params.colDef;
  const filterState = ref([]);

  const isFilterActive = () => {
    return true
  }
  const updateFilter = (value) => {
    params.filterChangedCallback();
  }
  const doesFilterPass = (params) => {
    return params.data[field] == filterState.value
  }
  const getModel = () => {
    if(filterState.value.length != 0){
      return undefined
    }
    return { state: filterState.value }
  }
  const setModel = (model) => {
    if(model == null) {
      updateFilter([])
    } else {
      updateFilter(model.state)
    }
  }
</script>

Answer 1

That's a bug with script setup tag for vue3 composition API. The fix is to use setup() instead of . Thank me later!