Vue 3 Composition API exported functions parameter dosnt update

Question

I just tryed to transform my Component into a Composition API component and realised that the parameter for the exported function dosn't get updated.

this is my Component:

export default {
      name: "ListItem",
      components: {
           ListItemButton,
           InputSwitch
           },
      props:{
           item:{
                type: Array,
                required: true
           },
           dragable:{
                type: Boolean,
                required: true
           },
           dontShowButtons:{
                type: Boolean,
                default: false
           },
           dragItem:{
                type: Array,
                default: []
           },
           deaktivierbar:{
                type: Boolean
           }
      },
      setup(props, context){
           const buttonClicked = ref(false)
           const editMode = ref(false)
           const itemName = ref("")
           const itemDescription = ref("")
           const canDrag = ref(false)
           const activeState = ref(true)
           

           onMounted(()=>{
                canDrag.value = props.dragable
                itemName.value = props.item[0]
                itemDescription.value = props.item[1]
           })
           const { dragStart, dragEnd, checkForDragging, isDragging, showPlaceholder} = useDragFunction(props.dragItem)




      
           return{
                //Variables
                buttonClicked,
                isDragging,
                editMode,
                itemName,
                itemDescription,
                canDrag,
                showPlaceholder,
                activeState,   

                //functions
                dragStart,
                dragEnd,

           }
      }

and this is my exported function:

    import { ref, computed, watch } from 'vue';

export default function useDragFunction( dragItem){
     const isDragging = ref(false)
     const showPlaceholder = ref(false)

     function dragStart(){
          isDragging.value = true
     }
     function dragEnd(){
          isDragging.value = false
     }
     function checkForDragging(){
          if (dragItem.length >0){
               showPlaceholder.value = true
          }
          else{
               showPlaceholder.value = false
          }
     } 

     return{
          dragStart,
          dragEnd,
          checkForDragging,
          isDragging,
          dragItem,
          showPlaceholder
     }
}

so when the user starts dragging, the function "checkForDragging()" gets executed. Also the props of the component changes so that the draged Item is stored in the dragItem variable. if i write everything into the component it works fine. if i export it into that function it stopped working. i found out that the passed property "dragItem" is always "[]". the props value will not get updated. i literally tryed everything but i cant get it to work.

Answer 1

If a prop is expected to be changed, it should be passed not by value but by reference, i.e. as a ref:

const dragItem = computed(() => props.dragItem);
const {...} = useDragFunction(dragItem);

And used like:

if (dragItem.value.length >0){ ...

Depending on the case, checkForDragging is redundant, and showPlaceholder needs to computed from dragItem:

const showPlaceholder = computed(() => dragItem.value.length >0);