Vue complains about wrong prop type but it makes no sense at all

I make a AJAX request like so;

export default {
  data() {
    return {
      isLoading: true,
      data: {},
  async created() {
    try {
      await this.fetchData(1);
    } catch (error) {
  methods: {
    async fetchData(page) {
      this.isLoading = true;
      const data = await this.$http.get(
      ); =;

      this.isLoading = false;

I then pass it into a table component I made;

<v-table :loading="isLoading" :data=""></v-table>

I have the props of that component here;

    data: {
      type: [Object, Array],
      required: true,
    loading: {
      type: Boolean,
      default: false,

But Vue complains that Invalid prop: type check failed for prop "data". Expected Object, Array, got Undefined

Which makes absolutely no sense to me. I’m awaiting the promise and inside my table component I have v-if checks for the prop.

I have no idea what is causing this, and the more frustrating part is the code WORKS just fine. Everything works like I expect it to, all data shows in my table just fine, just this annoying type error keeps showing up and it is really quite annoying.

This line is the problem:

<v-table :loading="isLoading" :data=""></v-table>

Initially your data prop is defined as {}, and you are trying to pass to the v-table component. is not defined, so Vue complains that the prop is undefined instead of an object.

Then, in your async fetchData you are doing =, but then you are also passing to the component.

Change that line to this:

<v-table :loading="isLoading" :data="data"></v-table>

And the warnings should go away.

Edit: looking back you say that the table works just fine the way you had it with :data="", in which case my solution above might break the working table. If that’s the case then instead change your initial empty data definition to data: {data: {}} so that exists.

1 Like