Vue js component is not working properly when reused in the same page

I have 2 components, parent and child. The child component fetches data to be shown based on the props that are passed into it. It works fine when I have one child component on a page, but when I try to use 2 of them(with different filters) only the last one contains items. What am I doing wrong?

Here are the simplified examples of both components

Parent component

    <main>
        <div class="container mx-auto sm:px-6 lg:px-8">
            <ItemList listName="listWith10Items" limit="10"></ItemList>
            <ItemList listName="listWith20Items" limit="20"></ItemList>
        </div>
    </main>

Child component

<template>
  <div>
    <h2 class="text-2xl font-extrabold tracking-tight text-gray-900">{{ listName }}</h2>

    <ul role="list" class="mx-4 inline-flex space-x-8 sm:mx-6 no-scrollbar">
      <li v-for="item in items" :key="item.id" class="w-64 inline-flex flex-col text-center">
        <span>{{item.title}}</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props: {
    listName: String,
    limit: Number,
  },
  data() {
    return {
      items: []
    }
  },
  created() {
    self = this;
    axios.get('***?limit=' + this.limit).then(res => self.items = res.data);
  }
}
</script>