[Vuejs]-Add data using the :data-obj directive after async function finishes

I was able to get it to work by using the mounted method and my function there.

<template>
  <div
    class="test-data"
    :data-obj="getData()"
  />
</template>
...
data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.testData = async () => {
      const data = await this.getTestData();
      this.data = JSON.stringify(data);
    };
    this.testData();
  },
  methods: {
    /**
     * Get data from api
     */
    getTestData() {
      return new Promise((resolve) => {
        const query = "theThingsINeed"
        fetch(query).then((resp) => {
          resolve(resp);
          return resp;
        });
      });
    },