Buefy Axios autocompletion

Question

We're trying to use the Buefy autocomplete with our Api and the API says that it needs an Object, no matter what we try, the text we type in the input won't accepted, it will though if we hard code it but that's obviously not an option. We're not sure how to change the code so it gives us the suggestions from the API. We're still in apprenticeship and are pretty lost at the moment.

We tried different approaches but none of them seem to work, any help would be greatly appreciated

 <b-field>
              <b-autocomplete
                v-model="text"
                :data="data"
                placeholder="e.g. Java"
                field="title"
                :loading="isFetching"
                @typing="newPost()"
                @select="(selected) => addSkill(selected)"
              >
              </b-autocomplete>
            </b-field>

<script>
/* import debounce from "lodash/debounce"; */
import axios from "axios";

export default {
  data() {
    return {
      data: [],
      skills: [],
      selected: "",
      isFetching: false,
      text: "",
    };
  },

  methods: {
    newPost(data) {
      const session_url =
        "Link to API";
      const config = {
        auth: {
          username: ,
          password: ,
        },
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      };
      data = { text: "" };
      axios
        .post(session_url, data, config)
        .then(function (response) {
          console.log("Authenticated");
          console.log(data);
          response.data = [];
          response.data.forEach((data) => this.data.push(data));
        })
        .catch(function () {
          console.log("Error on Authentication");
        });
    },
    addSkill(data) {
      if (data != null) this.skills.push(data.title);
      return;
    },
    deleteSkill: function (skill) {
      this.skills.splice(skill, 1);
    },
  },
};
</script>