<script setup>

import { ref, watch, toRefs } from 'vue'

const props = defineProps({
  test: String
})

let refTest = ref(props.test)
const { test: testToRefs } = toRefs(props)

watch(() => props.test, (newValue) => {
  refTest.value = newValue
})

</script>

<template>
  <div>
    All ways how to have reactive props ...
    <hr />
    child: <br />
    <hr />
    test -> {{ test }} <br />
    testToRefs -> {{  testToRefs }} <br />
    $props.test -> {{ $props.test }} <br />
    refTest-> {{ refTest }} <br />
  </div>
</template>

<!-- 
after 3 seconds

test -> two
testToRefs -> two
$props.test -> two
refTest-> two

-->