将变量传递给Vue 2单个文件组件中的模板

Question

我正在使用Nuxt和vue，因此编辑单个文件组件。

我真的很难设置一个变量，然后在我的模板中使用它。

EG。我的脚本中有这个：

<script>

import headers from '~/components/headers.vue'
import { TweenMax, Back } from 'gsap'
import footers from '~/components/footer.vue'
import { headroom } from 'vue-headroom'

export default {
  data: () => ({
    intersectionOptions: {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      thresholds: [0]
    } // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API,
  }),
  created () {
    this.topPos = 140
  },
  mounted: function () {
    var main = document.getElementById('main')
    // onsole.log(this.$refs['main'][0])
    window.addEventListener('resize', () => {
      console.log('The offsetTop of Main is  ' + main.offsetTop)
      this.topPos = main.offsetTop

      document.getElementById('headroom').setAttribute(':offset', main.offsetTop)
      console.log('Tried' + main.offsetTop)
    })
  },
  methods: {
    onWaypoint ({ going, direction }) {
      // going: in, out
      // direction: top, right, bottom, left
      if (going === this.$waypointMap.GOING_IN) {
        console.log('Entering the div: ' + going + '.  Reduce Nav and transition menus and logo')
      }

      if (direction === this.$waypointMap.DIRECTION_TOP) {
        console.log('Moving towards ' + direction + '.  If up, we should transition in Nav.')
      }
    }
  },
  components: {
    headers,
    footers,
    headroom,
  }
}
</script>

然后我只是想在我的模板中写出变量，如下所示：

<p v-if="topPos">topPos... {{topPos}}</p>

无论我改变什么，（即使没有调整大小监听器），我也无法从默认的'140'获取变量。以前我在“data {}”中设置了默认值，但结果仍然相同。

如何在渲染后动态更新模板中的变量？

我错过了什么明显的缺陷？！

我已经提到了VueJS：why is “this” undefined?但是接下来似乎也没有解决它。