Vue 3 Axios post call works but v-model lags a step behind?

Question

I am using Vue.js 3, Laravel and Axios to make a simple post call:

        processFilters() {
            self = this;

            let tags = self.checkedTags.slice();

            axios.post('/api/process-filters', { 
                filters: tags,
            })
            .then(function (response) {
                // self.checkedTags = response.data.filters;
                console.log(response.data.filters);
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        }

My Laravel backend function just tests if I can give back the same values to the js console:

    public function processFilters(Request $request)
    {

        $data['filters'] = $request->input('filters');
       
        // Return the response in json
        return response()->json($data);
    }

In the dev tools, my v-model checkedTags updates fine but always lags a step behind. For example, I am running processFilters() every time a checkbox is clicked:

<div v-for="(tagValue, tagKey) in tags" :key="tagKey" class="relative flex items-start py-2">
    <div class="min-w-0 flex-1 text-sm">
        <label :for="tagKey" class="font-medium text-gray-700 select-none">
        <input v-model="checkedTags" @click="processFilters()" :id="tagKey" :value="tagKey" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-600 rounded">   
        <span class="ml-2">{{ tagKey }}</span>
        </label>
    </div>
    <div class="ml-3 mr-1 flex items-center h-5">
        {{ tagValue }}
    </div>
</div>

When I click a checkbox, I get back an empty array. When two are clicked, I get an array size one, and so on?