vue中在浏览器重新刷新页面，吸顶效果失效

问题：第一次加载项目的时候是可以正常显示吸顶效果的，但是重新刷新页面的时候就没有了

 created() {
    this.getDestruction()
      this.watchScroll()
      window.addEventListener("scroll", this.watchScroll);
  },
  async mounted() {
    await this.getMarket();
    // console.log('this.turnover',this.burn)
    this.drawLine();
    // 事件监听滚动条
  },
   destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll);
    window.removeEventListener("scroll", this.handleClick);
  },
  methods: {
    watchScroll() {
      // 滚动的距离
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 容器的高度
      var offsetTop = document.querySelector("#headtitle_bg").offsetHeight;
      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
      if (scrollTop > offsetTop) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
  }

吸顶之前吸顶效果消失原因：获取不到#headtitle_bg节点解决方法：使用nextTick()方法，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作。

修改后的代码

created() {
    // console.log(this.$refs.To_Repurchase_VNC)
    // this.getMarket()
    this.getDestruction()
    this.$nextTick(() => {
      this.watchScroll()
      window.addEventListener("scroll", this.watchScroll);
    })
  },
  async mounted() {
    // console.log(this.$refs.To_Repurchase_VNC)
    await this.getMarket();
    // console.log('this.turnover',this.burn)
    this.drawLine();
    // 事件监听滚动条
  },
   destroyed() {
    // 移除事件监听
    window.removeEventListener("scroll", this.watchScroll);
    window.removeEventListener("scroll", this.handleClick);
  },
  methods: {
    watchScroll() {
      // 滚动的距离
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 容器的高度
      var offsetTop = document.querySelector("#headtitle_bg").offsetHeight;
      //  滚动的距离如果大于了元素到顶部的距离时，实现吸顶效果
      if (scrollTop > offsetTop) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },
}