JavaScript Class with same name for property and method

When researching a problem I ran into when trying to remove an event listener that uses bind() similar to the syntax in use by the class constructor below (I am not trying to remove this one, but it would not be successful if I tried), I found two sources that show a solution to that similar to that in use by the onDown method below (I do want this one removed once no longer needed) that creates a separte function that does the binding and the addEventListener attaches the function by its name:

class TestClass {
    constructor(el) {
        el.addEventListener('mousedown', function () { this.onDown(el.id) }.bind(this));
    }

    onDown(id) {
        // Here a property named onUp is created:
        this.onUp = this.onUp.bind(this, id);
        document.addEventListener('mouseup', this.onUp);
    }
    // Here a method named onUp is defined in the class:
    onUp(id) {
        document.removeEventListener('mouseup', this.onUp);
        console.log("Mouse down on " + id + " and then mouse up.");
    }
}

const d1 = new TestClass(document.getElementById("div1"));
const d2 = new TestClass(document.getElementById("div2"));

<div id="div1">Div 1: Click me and let go!</div>
<div id="div2">Div 2: Click me and let go!</div>

This code works and achieves my desired results, but what I observed is this creates a both property and a method with the same name, named onUp, in the objects created. This can also be verified by looking at the properties of the objects created (see image below). This is not otherwise possible as confirmed by the error received when calling the method that uses the same name as a property here:

class Test {
    sameName = "property";
    sameName() { return "method"; }
}

const testObject = new Test();
console.log(testObject.sameName); // Here Console outputs the value of the sameName property
console.log(testObject.sameName()); // This fails calling the sameName() method

Can someone help explain to me how this is working in the first example where an object has a property and method both with the same name? Is this a problem?

Note, I have alternate ways of doing this too. I can otherwise simply give one of them a different name:

onDown(el) {
    this._onUp = this.onUp.bind(this, el);
    document.addEventListener('mouseup', this._onUp);
}

onUp(el) {
    document.removeEventListener('mouseup', this._onUp);
    console.log("Mouse down on " + el.id + " and then mouse up.");
}

Or, the { once: true } option works for the example, but not in the actual code I am writing that uses different events (this is just a simplified example):

onDown(el) {
    document.addEventListener('mouseup', function () { this.onUp(el) }.bind(this), { once: true });
}

onUp(el) {
    console.log("Mouse down on " + el.id + " and then mouse up.");
}

Adding an image that shows the output properties of one of the TestClass objects. It first lists the property values. Since my example only had 1 property, I added another (named anotherProperty) to show the collection of properties, for control purposes. And under Prototype, it lists all the methods in the object. Both sections have an entry named onUp.

And here is another image if the output of the other Test object I built expecting to fail. In here you can see it is built with the same design; it has a property named sameName (which can be referenced) and it has a method under Prototype also names sameName (which fails when calling).

This failure is as expected. But again, in my first example, there is both a property and a method, both with the same name, onUp, and the method does function.