title: How do I make my custom element update based on the object that created it
body: <p>I have an object from class:</p>
  <pre><code>class House {
      constructor(user, name, cost, level) {
          this.user = user;
          this.name = name;
          this.cost = cost;
          this.level = level;
      }
  
      get costValue() {
          return this.cost;
      }
      get levelValue() {
          return this.level;
      }
  
      setLevel = (newLevel) =&gt; {
          this.level = newLevel;
      }
  
      setCost = (newCost) =&gt; {
          this.cost = newCost;
      }
  
      levelUp = () =&gt; {
          if (this.user.materials &gt;= this.cost) {
              this.user.subtractMaterials(this.cost);
              this.setLevel(this.level + 1);
              this.setCost(this.cost * 1.25);
          }
      }
  
      canLevelUp = () =&gt; {
          return this.user.materials &gt;= this.cost;
      }
  }
  </code></pre>
  <p>And the HTML object</p>
  <pre><code>const houseComponent = (houseObj) =&gt; {
      const house = document.createElement('div');
      house.className = 'house';
  
      const title = document.createElement('h2');
      title.innerHTML = houseObj.name;
  
      const level = document.createElement('p');
      level.innerHTML = `Level: ${houseObj.levelValue}`;
  
      const cost = document.createElement('p');
      cost.innerHTML = `Cost: ${houseObj.costValue}`;
  
      const button = document.createElement('button');
      button.textContent = 'Level Up';
      button.onclick = function() {
          if (houseObj.canLevelUp()) {
              houseObj.levelUp()
          }
      };
  
      house.appendChild(title);
      house.appendChild(level);
      house.appendChild(cost);
      house.appendChild(button);
      return house;
  }
  </code></pre>
  <p>The HTML renders fine, but when the button is clicked the HTML won't update.
  If I console log the house and the <code>User</code>, their values update correctly just won't update.</p>
  <p>How do I make the HTML element reactive to the objects that it uses to render it?</p>
  <p>Only vanilla js, no frameworks. Any help would be greatly appreciated.</p>