更新 vue js 值

我想在加载/呈现页面后用实际值异步更新占位符（currentUsername）。

我尝试关注一个示例项目 ( https://github.com/jackfranklin/vue2-demo-proj )，但我无法将它与我的设置相关联。使用 vuejs 2.0。我可以看到事件被触发，进行了调用并返回了一些东西，我的 Chrome 控制台上没有错误，但 UI 中没有任何更新。这是为什么？

1）.html文件：

  <script src="assets/js/data.js"></script>

2）data.js：

"use strict";

import * as DataXXX from './data.vue';
Vue.component("dataxxx", DataXXX);

var vm = new Vue({
  el: "#app",
});

3）data.vue

<template>

  <div>
    <p v-if="currentUsername == null">
      Null username
    </p>
    <p v-else>
      Username: {{ currentUsername }}:
    </p>
  </div>

</template>

<script>
  "use strict";

  export default
  {
    created()
    {
      awr.EventsBus.$on("requestLoadData", this.loadData);

      awr.EventsBus.$emit("requestLoadData", this.loadData);
    },

    destroyed()
    {
      awr.EventsBus.$off("requestLoadData", this.loadData);
    },

    methods:
    {
      loadData(name)
      {
        alert("got event");

        this.currentUsername = name;
        this.fetchGithubData(name);
      },

      fetchGithubData(name)
      {
        const url = "http://127.0.0.1/getUsername.php";

        alert("requesting url: " + url);

        fetch(url).then(response => response.text()).then(data => {
          this.currentUsername = data;

          console.log("got response: " + data);
        });
      }
    },
    data() {
        return {
          currentUsername: null
      }
    }
  }

</script>