Computed Basics Example - Vue

.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <ul>
      <li v-for="banana in filterBanana" :key="banana.id">
        {{ banana }}
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data() {
    return {
      frutas: [
        { id: 1, name: 'banana-maca' },
        { id: 2, name: 'banana-prata' },
        { id: 3, name: 'maça' },
        { id: 4, name: 'pera' },
        { id: 5, name: 'uva' },
        { id: 6, name: 'uva2' },
        { id: 7, name: 'pessego' },
        { id: 8, model: 'jaca' },
      ],
    };
  },
  computed: {
    filterBanana() {
      const filterFruit = this.frutas.filter(({ name }) => name === 'uva');
      return filterFruit;
    },
  },
};
</script>