Duplicated key error on Vue composition API's return statement

Question

Since Vuetify's support for Vue 3 is still in beta, I'm trying to use Composition API in Vue 2. I'm using it like this:

<script>
import { defineComponent } from '@vue/composition-api'
import { computed, toRef } from 'vue'
import fetchOtherImages from 'some-library'

export default defineComponent({
  name: 'PhotoGallery',
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const { images: imagesFromProps } = toRef(props)
    const images = computed(() => [
      ...imagesFromProps.value.map(image => image.getUrl()),
      ...fetchOtherImages()
    ])
    return { images }
  },
})
</script>

The problem is, it throws vue/no-dupe-keys in that return statement. Am I doing this properly? I'm new to the whole Composition thing and Vue 2's documentation on the subject is not helping.

Answer 1

https://eslint.vuejs.org/rules/no-dupe-keys.html

There are a data named images (returned by setup) and a prop named images, which is against rule vue/no-dupe-keys.

You can rename the data returned by setup:

  setup(props) {
    const { images: imagesFromProps } = toRef(props)
    const images = computed(() => [
      ...imagesFromProps.value.map(image => image.getUrl()),
      ...fetchOtherImages()
    ])
    return { imagesComputed: images }
  },

By the way, highly recommend Vue 2.7 instead of Vue 2.6 + @vue/composition-api!