Nuxtjs和Axios上的计算属性？

Question

I want to return an array of unique cards by name. I was able to do this in Vuejs using the following code.

<template>
  <div id='Home'>

    <div class="columns is-multiline">
        <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
    </div>

  </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from '@/components/Site/Card'

export default {
  name: 'Home',
  components: { Card },
  computed: {
    cards () {
      return this.$store.state.cards
    },
    uniqueCards () {
      return uniqBy(this.$store.state.cards, function (r) {
        return r.project
      })
    }
  }
}
</script>

I am converting my project to Nuxtjs and using an api to get appCards. How do I achieve the same functionality as above using axios? Below piece works, but I want to use the uniqueCards() function. What am I doing wrong here?

<template>    
    <div id="Home">

        <div class="columns is-multiline">
        <card v-for="card in appCards" :card="card" :key="card.id"/>
        </div>

    </div>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
    components: {
        Card
    },
    data() {
        return {
            appCards: []
        };
    },
    async asyncData({ $axios, params }) {
        try {
            let appCards = await $axios.$get(`/appcards/`);
            return { appCards };
        } catch (e) {
            return { appCards: [] };
        }
    },
    mounted: {
        uniqueCards () {
            uniqBy(this.appCards, function (r) {
                return r.project;
        })
        }
    },
};
</script>

Answer 1

Nevermind, got it to work! I forgot the proper syntax.

<template>    
    <div id="Home">

      <section class="section is-small">
        <div class="container">
          <div class="columns is-multiline">
            <card v-for="card in uniqueCards" :card="card" :key="card.id"/>
          </div>
        </div>
      </section>

    </div>

</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Card from "~/components/Card.vue";

export default {
  components: {
    Card
  },
  data() {
    return {
      appCards: []
    };
  },
  async asyncData({ $axios, params }) {
    try {
      let appCards = await $axios.$get(`/appcards/`);
      return { appCards }
    } catch (e) {
      return { appCards: [] };
    }
  },
  computed: {
    uniqueCards: function () {
        return uniqBy(this.appCards, function (r) {
            return r.project
      })
    }
  }
};
</script>