How to use the @material/top-app-bar.MDCTopAppBar.attachTo function in @material/top-app-bar

const modelLoadingNotice = document.querySelector("#model-loading");
  const progressBar = document.querySelector("#progressBar");
  const rippleSurface = document.querySelectorAll(".ripple-surface");

  for (let i = 0; i < 9; i++) {
    predictedWordsButtons.push(document.querySelector(`#word${i + 1}`));
  }

  modelLoadingNotice.style.display = "block";
  btnsDiv.style.display = "none";
  inputTextField.style.display = "none";

  rippleSurface.forEach(i => MDCRipple.attachTo(i));

  let mdcTextField = new MDCTextField(inputTextField);
  MDCTopAppBar.attachTo(document.querySelector("#app-bar"));
  let drawer = new MDCTemporaryDrawer(document.querySelector("#drawer"));

  document.querySelector("#menu").addEventListener("click", () => {
    drawer.open = true;
  });

  const model = await loadModel("/web_model/model.json");

  /**
   * Predict next word
   * @param {string} string Input String.
   * @param {number} numPrediction Total number of prediction to get.
   */
  window.predictNextWord = async (string, numPrediction) => {
    isQuestion = false;
    string = string.toLowerCase().split(" ");

mounted () {
    this.updateSlots()
    this.slotObserver = new MutationObserver(() => this.updateSlots())
    this.slotObserver.observe(this.$el, {
      childList: true,
      subtree: true
    })

    this.mdcTopAppBar = MDCTopAppBar.attachTo(this.$el)
    if (this.scrollTarget && this.scrollTarget !== window) this.mdcTopAppBar.setScrollTarget(this.scrollTarget)
  },
  beforeDestroy () {