how can I manually unwrap refs in Vue templates

javascript
<template>
  <!-- Unwrap ref manually -->
  <div :style="myRef.value.style"></div>
</template>

<script setup>
  import { ref } from 'vue';

  const myRef = ref({
    style: 'color: black'
  });
</script>

In this example, `myRef` is a reactive reference to an object with a `style` property. To access the `style` property in the template, you need to use the `.value` property to unwrap the ref.

Alternatively, you can use the `computed` property to create a computed property that unwraps the ref:

javascript
<template>
  <!-- Unwrap ref using computed property -->
  <div :style="unwrappedStyle"></div>
</template>

<script setup>
  import { ref, computed } from 'vue';

  const myRef = ref({
    style: 'color: black'
  });

  const unwrappedStyle = computed(() => myRef.value.style);
</script>

In this example, `unwrappedStyle` is a computed property that unwraps the `style` property from `myRef`.