Rails APIで取得したデータをリアルタイムで画面に反映させたい。

練習でRails APIとNuxt.jsを使用したWebアプリケーションを作成しております。

Nuxt.jsは以下のコードようになっており、テキストフィールドに文字を入力して送信を押すとPOSTでRails APIを叩いてデータベースにデータを保存する形になっております。

送信ボタンを押した際にデータはちゃんとデータベースに追加されるのですが、画面の表示が変わりません。
ページをリロードして初めて追加したデータが表示されます。

送信ボタンを押した際に画面上に追加したデータが表示されるようにするにはどうしたらよいでしょうか？

<template>
  <div>
    <ul>
      <li v-for="(data, index) in datas" :key="data.name">{{ index }}{{ data.name }}</li>
    </ul>
    <input v-model="newData" />
    <p @click="register">送信</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: "",
      newData: ""
    };
  },
  async asyncData({ $axios }) {
    const response = await $axios
      .$get("http://localhost:3000/api/v1/users")
      .catch(error => {
        console.log("response error", error);
        return false;
      });
    return { datas: response.data };
  },

  methods: {
    register() {
      this.$axios.post("http://localhost:3000/api/v1/users", {
        name: this.newData
      });
      const response = this.$axios
        .$get("http://localhost:3000/api/v1/users")
        .catch(error => {
          console.log("response error", error);
          return false;
        });
      return { datas: response.data };
    }
  }
};
</script>