Vue and GraphQL - Problem with refresh cache - vue.js

Question

I am learning Vue and Grpahql, and have created a Trello like application.
I have created a page, that calls a mutation and adds a card entry to the database. In order to refresh the page I am trying to clear the query cache. When you click the add card button it should appear in the list. It happens the first time you click add card button, but not on subsequent tries.
<template>
<button
#click="addCard"
class="flex w-full items-center pl-2 pr-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md hover:bg-gray-200"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
<span class="ml-1">Add card</span>
</button>
</template>
<script>
import CardAdd from "./../graphql/CardAdd.gql";
import BoardQuery from "./../graphql/BoardWithListsAndCards.gql";
export default {
methods: {
addCard() {
this.$apollo.mutate({
mutation: CardAdd,
variables: {
title: 'Added through mutation',
listId: 1,
order: 1
},
update(store, {data: {cardAdd} }) {
const data = store.readQuery({
query: BoardQuery,
variables: { id: 1 }
});
data.board.lists.find(list => (list.id = 1)).cards.push(cardAdd);
store.writeQuery({query: BoardQuery, data });
}
});
}
}
}
</script>
This is the add card mutation:
mutation CardAdd($listId: ID!, $title: String!, $order: Int!) {
cardAdd(
input: {
title: $title
list_id: $listId
order: $order
owner_id: 1
}
) {
id
title
order
}
}
This is the board query:
query BoardWithListsAndCards($id: ID!) {
board(id: $id) {
id
title
color
lists {
id
title
board_id
board {
owner {
id
}
}
cards {
id
title
order
owner {
id
}
}
}
}
}