Watch triggers only once - vue3-CodePudding

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?

CodePudding user response：

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;
},