Vue SFC Playground showing how refs and values passed to composables work

App.vue

<script setup>
import { ref } from 'vue'
import { useTest } from './test';

const notRefValue = 3
const refValue = ref(7)

const test = useTest(notRefValue, refValue)


</script>

<template>
  <h1>
    App.vue values
  </h1>
  <ul>
    <li>notRefValue: {{notRefValue}}</li>
    <li>refValue: {{refValue}}</li>
  </ul>
  <h1>
    composable values
  </h1>
  <table>
    <thead>
    <tr>
      <th>Input Raw</th>
      <th>Its Ref</th>
      <th>Squared</th>
      <th>Ref Squared</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>notRefValue: {{test.notRefValue}}</td>
      <td>notRefValueRef: {{test.notRefValueRef.value}}</td>
      <td>notRefValuefSquared: {{test.notRefValueSquared.value}}</td>
      <td>notRefValueRefSquared: {{test.notRefValueRefSquared.value}}</td>
    </tr>
    <tr>
      <td>refValue: {{test.refValue}}</td>
      <td>refValueRef: {{test.refValueRef.value}}</td>
      <td>refValueSquared: {{test.refValueSquared}}</td>
      <td>refValueRefSquared: {{test.refValueRefSquared.value}}</td>
    </tr>
    </tbody>
  </table>

  <button @click="test.incrementNotRefValue">Increment not ref value</button>
  <button @click="test.incrementRefValue">Increment ref value</button>
  <button @click="test.incrementNotRefValueRef">Increment not ref value ref</button>
  <button @click="test.incrementRefValueRef">Increment ref value ref</button>
  
</template>


<style>
table, thead, tbody, tr, td, th {
  border: 1px solid gainsboro;
}
</style>

Link.md

Vue Playground Link

What was learned:

• Values passed as not strings, so raw JS objects or the .value on a Vue ref, changing it internally in the composable does not affect the original object
• If a ref is passed into the composable, changing it, or a ref created from it, will update the original object

useTest.ts

import {ref, type Ref, toRef, computed } from 'vue';

export function useTest(notRefValue: number, refValue: Ref<number>) {
  const notRefValueRef = ref(notRefValue)
  const refValueRef = toRef(refValue)

  const notRefValueRefSquared = computed(()=> notRefValueRef.value*notRefValueRef.value)
  const refValueRefSquared = computed(()=> refValueRef.value*refValueRef.value)
  const notRefValueSquared = computed(()=> notRefValue*notRefValue)
  const refValueSquared = computed(()=> refValue.value*refValue.value)

  function incrementNotRefValue() {
    notRefValue+=1
  }
  function incrementNotRefValueRef() {
    notRefValueRef.value+=1
  }
  function incrementRefValue() {
    refValue.value+=1
  }
  function incrementRefValueRef() {
    refValueRef.value+=1
  }

  return {
    notRefValueRef,
    refValueRef, 
    notRefValue,
    refValue,
    notRefValueRefSquared,
    refValueRefSquared,
    notRefValueSquared,
    refValueSquared,
    incrementNotRefValue,
    incrementNotRefValueRef,
    incrementRefValue,
    incrementRefValueRef
  }
}