Getter named as "loading" not acceptable

I got myself losing tons of hours trying to track a bug in my app to discover that nuxt-property-decorator does not accept a getter named “loading”.

<template>
  <div>{{ loading }}</div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class Playground extends Vue {
  get loading() {
    return 'loading...'
  }
}
</script>

[Vue warn]: Property or method "loading" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Steps to reproduce

• yarn create nuxt-app my-nuxt-ts-app leave default to all options except javascript/typescript part (select typescript)
• yarn add nuxt-property-decorator
• on pages/index.vue:6 replace to {{ loading }}
• replace Vue.extend to a class component as above
• yarn dev

Sandbox https://codesandbox.io/s/nuxt-property-decorator-loading-bug-orv7l?file=/pages/index.vue

[aapelismith]

You have to change your variable name to avoid this problem

[Pacheco95]

I dont think this problem was caused by progress bar configuration because it is setted up in nuxt.config.ts, not in the component definition