How to "simulate" a Ref?

Question

I have a Vue3 component in which setup() I defined the following function:

const writeNote(note: Ref<Note>) => { console.log(`note ${note.id}` }

It receives a Ref<Note>, and Note is an Interface.

This function is called on two occasions:

• in <template> from an event of a component (@modified-note='writeNote'), so what is passed to the function is a reference
• in a function in setup() that retrieves elements of type Note and passes them to writeNote. What is passed in that case is a "naked" variable" (not a reference)

How can I solve this contradiction?

• in the call in the template, by somehow "un-referring" what is being sent? (in which case I would modify the type of the argument in the function to a bare Note)
• in the call in the function in setup(), by somehow turning a normal variable into a reference for the sake of this call?

Answer 1

You can use Vue's unref:

const writeNote(_note: Ref<Note> | Note) => { 
  const note = unref(_note);

  console.log(`note ${note.id}`);
}

Either that or you will have to create a reactive variable when passing to writeNote as you have described in your question. This solution is a bit cleaner but requires you to change writeNote's signature and inners of the function