Empty .value when using the setup() method in compositionApi

Question about compositionApi and useFind

When querying my Notes service:

const { items, isPending } = useFind({ model: Note, params: { query } })
return { items }

I have a populate items on refresh and on when navigating to the route through the app

Now, when I want to filter the date:

const items2 = items.value.filter(v => v)
return { items, items2 }

items is always populated, but item2 is only populated when I navigate to the component through the app and is empty on refresh. I understand you lose the store… and it appears that the value.filter fires before the data is loaded… so I’m wondering what the point of filtering within the setup method is?

The example shows it doing this: https://vuex.feathersjs.com/composition-api.html#working-with-refs

My only solution is to only return the items RefImpl and filter in a computed property or something, which feels janky and not what the examples encourages.

Any thoughts?

---

Here is the component. To recap items.length = 1 always, but items2.length will show 0 on refresh of page.

<template lang="pug">
.player-score( v-if="haveLoaded" )
  v-row(justify="center")
    v-col.text-center(
      cols="10"
    )
      .text-h1 {{ items.length }}
    v-col.text-center(
      cols="10"
    )
      .text-h1 {{ items2.length }}
</template>

<script>
import { useFind } from 'feathers-vuex'
import { computed } from '@vue/composition-api'

export default {
  name: 'PlayerScore345',
  setup (props, context) {
    const { Note } = context.root.$FeathersVuex.api
    const noteParams = computed(() => { return { query: { $limit: 1 } } })
    const { items, haveLoaded } = useFind({ model: Note, params: noteParams })
    const items2 = items.value.filter(v => v)
    console.log(items, haveLoaded)
    return { items, items2, haveLoaded }
  }
}
</script>

<style lang="scss" scoped>
</style>

[J3m5]

I’d say that filtering on the ref value and returning raw value make it loose reactivity. You should make it a computed to make it works.

At first sight, it seem’s to be a problem with vue 3 reactivity.

[marshallswain]

ah thanks @philipimperato for pointing out the inconsistency in the docs. And as always, thank you @J3m5 for pitching in to see the fix!

I just pushed up a fix for the docs that wraps those two filtered arrays into computed properties.