Condition does not work || or. What am I doing wrong?

Question

JavaScript

created() {
    this.getUserRecipes();
    window.addEventListener('resize', this.countRanks);
  },
  computed: {
    ranks() {
      const ranks = [];
      this.selectedRecipes.forEach((item, index) => {
        const rank = Math.floor(index / (this.countRanks() || 4));
        if (!ranks[rank]) {
          ranks[rank] = [];
        }
        ranks[rank].push(item);
      });
      return ranks;
    },
  },
  methods: {
    countRanks(e) {
      const screenWidth = e.target.innerWidth;
      if (screenWidth >= 992 && screenWidth < 1200) {
        return 3;
      }
      if (screenWidth >= 768 && screenWidth < 992) {
        return 2;
      }
      if (screenWidth > 0 && screenWidth < 768) {
        return 1;
      }
      return 4;
    },

It throws an error "Error in render: "TypeError: Cannot read properties of undefined (reading 'target')"

Help me understand, you need const rank = Math.floor(index / ****)
*** by default should be 4, but if the function fires, countRanksit should be the number that it will return.

Answer 1

1) The error is not in "||"
2) Also, this block is absolutely not needed, because in "countRanks ()" does not return a false value.
3) The error is described in plain text as "TypeError: Cannot read properties of undefined (reading 'target')" , all you need to do is open the translator.

Answer 2

Look closely at the method call.

const rank = Math.floor(index / (this.countRanks() || 4));

And now to its definition

countRanks(e) {
}

Don't you think that you forgot about the parameter?