I am facing issue in filtering data by filter due to fields , cant filter anything and it shows no filter value. If i remove fields , filter works but cant add in scopped slots. please help

const fields = [

{

  key: "VariableName",

  label: "Variable Name",

  sorter: false,

  filter: true,

},

{

  key: "EditableVariableName",

  label: "Editable Variable Name",

  sorter: false,

  filter: true,

},

{

  key: "VariableType",

  label: "Variable Type",

  sorter: false,

  filter: true,

},

{

  key: "IgnoreVariable",

  label: "Ignore Variable",

  sorter: false,

  filter: true,

},

];
.
.
.
.
<CDataTable

                    tableFilter

                    itemsPerPageSelect

                    columnFilter

                    itemsPerPage={5}

                    hover

                    sorter

                    items={data[1]}

                    fields={fields}

                    bordered

                    striped

                    pagination

                    addTableClasses="table_style"

                    scopedSlots={{

                      // Handle for Variable Name

                      VariableName: (items) => (

                        <td

                          className="var-box"

                          style={{ color: "#0f386a" }}

                        >

                          {items.variableName}

                        </td>

                      ),

.
.
.
.
.