Vue-не удается получить данные реквизитов дочернего компонента после извлечения данных

Я пытаюсь передать данные, полученные от извлечения JSON, в дочерний компонент для создания v-карт. Через несколько часов я не могу найти проблему. Единственное, что я замечаю, - это то, что опора в родителе никогда не получает данные после завершения выборки.

App.vue (parent)

<template>
  <v-app>
    <v-tabs centered="centered">
      <v-tab v-for="tab in cities" :key="tab.id" @click='loadPacks(tab.id)'>{{tab.name}}</v-tab>
   </v-tabs>
  <cards v-if="chequeoData" :dataPaquetes="dataPackages" :key="dataPackages"/>
  </v-app> 
</template>

<script>
import cards from './components/Card.vue'

export default {
  name: 'App',
  components: {
    cards,
  },
  data: () => ({
    pepito: 0,
    rating: 3,
    centered: true,
    isFetching: false,
    chequeoData: false,
    cities: [{
      id: "pE",
      name: "Punta del Este"
    },{
      id: "cU",
      name: "Costa Uruguaya"
    }],
    dataPackages: [],
  }),
  methods: {
  loadPacks: function (val) {
      self.dataPackages = [];
      var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
      targetUrl = val == 'cU' ? 'http://ldimaria.challenge.trinom.io/obtener-promociones-costa-uruguaya.json' : 'http://ldimaria.challenge.trinom.io/obtener-promociones-punta-del-este.json';
      fetch(proxyUrl + targetUrl)
        .then(blob => blob.json())
        .then(data => {
          self.dataPackages = data.promociones;
          // eslint-disable-next-line no-console
          console.log(self.dataPackages);
          self.chequeoData = true;
        })
    }
  },
  props: {
    dataPaquetes: self.dataPackages
  },
 mounted() {
    this.loadPacks()
  }
};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');


</style>

Журнал консоли показывает данные без проблем, однако средства разработки VUE показывают мне, что dataPaquetes не определен

Card.vue (Child component)

<template>
<v-container>
<v-layout>
<v-flex xs12 sm6 md3 lg3 v-for="item in dataPackages" :key="item.codigo">
<v-card>{{item.ciudad}}
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>


<script>

export default {
  name: 'cards',
  props: ['dataPaquetes'],
  data: () => ({
      rating: 3,
      dataPackages: self.dataPaquetes,
    }),
  methods: {},
  mounted() {
    self.dataPackages = self.dataPaquetes;
    // eslint-disable-next-line no-console
    console.log(self.dataPaquetes)
},
};
</script>

Спасибо за чтение и за помощь