VueJS和Firestore-未捕获(承诺中)类型错误:无法读取未定义的属性

我正在VueJS中创建一个简单的应用程序模型,使用Google Cloud Firestore作为后端。

我已经安装并运行了一个模板,并且该应用程序已成功与Firestore进行对话。

下面是我的一个Vue组件的工作组件,它从Firestore中获取一些数据并记录到控制台:

<script>
import db from './firebaseInit'
export default {
  name: 'MainScr',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [],
    }
  },
  created () {
    var docref = db.collection('UI_Elements').doc('Metric_Dropdown')    

    docref.get().then(function(doc) {
      if (doc.exists) {
        const mydata = doc.data().Metrics 
        console.log(mydata)
      } else {
        console.log("No such document")
      }
    })
  }
}
</script>

到目前为止还不错。控制台根据需要记录一系列指标:

(3) ["Return On Equity", "Net Margin", "EPS"]

我的下一步是在“mydata”中传输数据并将其附加到“options”对象,这就是我遇到麻烦的地方。

我试着遵循本教程的模式 https://www.youtube.com/watch?v=rUz4oz7dTno&t=491s 并在“控制台”下面插入了以下代码行。日志(mydata)“”

this.options.push(mydata)

但是,我得到以下错误:

Uncaught (in promise) TypeError: Cannot read property 'options' of undefined
    at eval (MainScr.vue?d2a3:33)

我不明白为什么它不能读取“选项”属性?任何帮助都将不胜感激。