this binding in arrow function, in javascript

Question

const counter = {
 num : 1,
 increase: () => {
  return ++this.num;
 },
 decrease: function(){
  return --this.num;
 }
}

console.log(counter.increase());

I know arrow functions don't have this binding itself so when you call this inside of an arrow function, it searches the object from the outer scope of the arrow function.

My question is, why this from the code above doesn't point to the counter object? And then, isn't the decrease function in the object supposed to point the same object with the increase arrow function, since it doesn't have its own this?

I am so confused..! Hope someone can have a clear answer for this!