Script setup - how to use props in computed

Question

<script setup>
import { defineProps, computed } from '@vue/runtime-core'

defineProps({
  foo: Array,
})

const length = computed(() => {
  return foo.length         // foo is not defined
})
</script>

In this block which is quite self-explained, when I try to reach props variable in computed, an error throws like 'foo is not defined'

Answer 1

defineProps returns a reference to the given props, from which you could access foo in computed:

<script setup>
import { defineProps, computed } from 'vue'
        👇
const myProps = defineProps({
  foo: Array,
})

const length = computed(() => {
  return myProps.foo.length
})          👆
</script>

demo