数据更改时组件不更新 - VueJS

Question

所以我一直在努力解决这个问题。我正在与Quasar Framework合作构建测试应用。我遇到的问题是在从contacts cordova plugin收到数据时更新组件。这是我正在使用的代码：

显示列表：

<q-list>
      <q-item v-for="contact in myContacts">
        <q-item-main :label="getName(contact)" :sublabel="contact.phoneNumbers[0].value" />
        <q-item-side right icon="add circle outline" @click="addContact(getName(contact), contact.phoneNumbers[0].value, $event)" />
      </q-item>
</q-list>

我的变量：

data () {
    return {
      myContacts: []
    }
}

更新myContacts变量。

mounted () {
    var self = this

    // Loader
    Loading.show({
      message: 'Loading...'
    })

    var cSort = function (a, b) {
      var an = a.name.formatted.toUpperCase()
      var bn = b.name.formatted.toUpperCase()
      return (an < bn) ? -1 : (an == bn) ? 0 : 1
    }

    var onConSuccess = function (contacts) {
      Loading.hide()
      self.myContacts = contacts.sort(cSort)

     alert(self.myContacts) // used to verify that the variable is getting updated
    }

    var onConError = function () {
      Loading.hide()
      Dialog.create({
        title: 'Oh no...',
        message: 'Error...',
        buttons: [
          'Ok'
        ]
      })
    }

    var options = new ContactFindOptions()
    options.filter = ''
    options.multiple = true
    var fields = ['*']
    navigator.contacts.find(fields, onConSuccess, onConError, options)
}

有人知道为什么我的列表在更新myContacts变量时没有更新？非常感谢任何帮助。