<q-separator class="divider" size="10px" color="grey-2" />
<q-list separator>
  <q-item 
  v-for="nweet in nweets"
  :key="nweet.date"
  class="q-py-md"
  

    <
      <q-item-label class="nweet-content">{{ nweet.content }}</q-item-label
      >
      <
    </q-item-section>

    <q-item-section side top> 
      {{ nweet.date | relativeDate }} 

    </q-item-section>
  </q-item>
</q-list>

I am facing a problem with {{ nweet.date | relativeDate }} It's giving me [vue/no-deprecated-filter] Filters are deprecated. Error. Please help

here is script

 <script>



import { formatDistance } from 'date-fns'




export default {
name: "PageHome",
data() {
return {
  newNweetContent: '',
  nweets: [
    {
      content: 'Hello world!',
      date: 1983230426
    },
    {
      content: 'Hello world!',
      date: 1983335689
    }

  ]
  
};},


filters: {
  relativeDate(value) {
    return formatDistance(value, new Date())
 }

} }

Is there any other way to set date? Can you tell me how I can use other thing. I mean can I use other library like date-fns. If yes how I can use it? Any help will be appreciated