Filter not picking up new changes

I have a field which is rendering a component
```
shoppingList: {
title: 'Add To Shopping List?',
type: 'custom',
filter: {
type: 'checkbox',
config: {
true: 'true',
false: 'false'
}
},
valuePrepareFunction: value => [value, 'shoppingList'],
renderComponent: CheckboxComponent
},
```
And that component determines whether a checkbox should be 'checked' or not by calling this function on click. Which basically just converts the boolean value to its opposite and then interacts with the API to save it to the DB.
```
changeBoolean() {
this.checked = !this.checked;
this.inventoryService.patchOne({
id: this.rowData._id,
query: {[this.name]: this.checked}
});
}
```
This is the template of the component...
```
template: `

This all works perfectly, until a filter is applied. If 3 elements have their checkbox 'checked', then the filter is applied to only show those that are 'true' then they don't appear.

If the page is refreshed (f5) then the filter works fine.

Let me know if there is any more information that can be proved to help me get this solved.