vue3 can I cange composition api ref type?

Question

if I have a props.id array like this from father component to prop another components

<components id="1"></components >
<components id="2"></components >
<components id="3"></components >

could I base on this props.id to change my ref type like this?

<script set-up>
    import { ref, defineProps} ... 
    const props = defineProps({
        id: Number
    })
    const state = {
         data: props.id === 3 ? ref([]) : ref({})
    }
</script set-up>

Answer 1

You can assign the default value by the props.

const state = ref(props.id === '1' ? [] : {});

And I recommend using reactive instead ref if you want to watch an object.