Watch triggers only once - vue3 - vue.js

Question

Vue3 newbie here. I am trying to toggle a string value, but watch triggers only once.
<template>
<div>
...
<table>
<thead>
...
<th>
<div className="create-date-label">
<p>Create Date</p>
<i
#click="toggleSortDate"
:className="
sortDirection === SORT_DIRECTIONS.DESCENDING
? 'fa fa-arrow-down'
: 'fa fa-arrow-up'
"
/>
</div>
</th>
...
</div>
</template>
<script>
import Navbar from "../components/Navbar.vue";
import ConfigurationRow from "../components/ConfigurationRow.vue";
const SORT_DIRECTIONS = Object.freeze({
ASCENDING: "ASCENDING",
DESCENDING: "DESCENDING",
});
export default {
name: "Home",
components: {
Navbar,
ConfigurationRow,
},
data() {
return {
configurations: [],
SORT_DIRECTIONS,
sortDirection: '',
};
},
methods: {
toggleSortDate() {
if (this.sortDirection === this.SORT_DIRECTIONS.ASCENDING)
this.sortDirection = this.SORT_DIRECTIONS.DESCENDING;
if (this.sortDirection === this.SORT_DIRECTIONS.DESCENDING)
this.sortDirection = this.SORT_DIRECTIONS.ASCENDING;
},
},
watch: {
sortDirection: function (newDirection) {
console.log("watch sort direction", newDirection); //Prints ASCENDING once
if (newDirection === this.SORT_DIRECTIONS.ASCENDING)
this.configurations = this.configurations.sort(
(a, b) => a.date.getTime() - b.date.getTime()
);
else if (newDirection === this.SORT_DIRECTIONS.DESCENDING)
this.configurations = this.configurations.sort(
(a, b) => b.date.getTime() - a.date.getTime()
);
},
deep: true, //Tried with removing this too, same result
},
created() {
this.configurations = [
{
key: "some_key",
value: "1.4.5.21",
description: "This is a kind of a long description",
date: new Date(),
},
{
key: "another_key",
value: "1.2",
description: "Desc",
date: new Date(),
},
{
key: "min_value",
value: "13",
description:
"This is a kind of a long description This is a kind of a long description This is a kind of a long description ",
date: new Date(),
},
].sort((a, b) => a.date.getTime() - b.date.getTime());
this.sortDirection = this.SORT_DIRECTIONS.DESCENDING;
},
};
</script>
I am using vue3 but do I have to use ref or reactive to achieve this? Anybody have an idea on how this triggers once but not again?

Answer 1

Try this:
toggleSortDate() {
if (this.sortDirection === this.SORT_DIRECTIONS.ASCENDING)
this.sortDirection = this.SORT_DIRECTIONS.DESCENDING;
else if (this.sortDirection === this.SORT_DIRECTIONS.DESCENDING)
this.sortDirection = this.SORT_DIRECTIONS.ASCENDING;
},