Not able to filter using lodash in computed Nuxt

Question

I am unable to filter using lodash in computed property in nuxt.
I fetch a list of blogs from an API and in Vue debugger I am getting the following error

(error during evaluation)

I want to filter list of data which has deleted status is false.

Here is the the JS

<script>
import { _ } from 'lodash'

export default {
  data() {
    return {
      data: [
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Guide To Visiting Inflatable Island In The New Normal',
        },
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: '24 Best Places to Celebrate New Year in India',
        },
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Top Things to Do in Dubai',
        },
        {
          deleted: {
            status: true,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Best Places to Celebrate New Year 2022',
        },
      ],
    }
  },

  computed: {
    activeData() {
      return _.filter(this.data, { 'deleted.status': false })
    },
  },
}
</script>

Answer 1

You don't really need lodash for this.

Use a vanilla JS filter method like this

return this.data.filter((el) => !el.deleted.status)

or this if you want to check for strict equality to false, rather than just using a falsy value (undefined, null, etc...)

return this.data.filter((el) => el.deleted.status === false)