Vue 3: Bind ref value to object property - node.js

Question

I'm running into an issue where I'm trying to bind an object property to a ref in Vue, using the new composition API. I'm expecting the template to re-render with the new value after setting the ref value, but I'm however getting a RefImpl {} instead. How would I solve this?
<template>
<v-card>
<v-card-text class="pa-2">
<div v-for="(social, index) in socials" :key="index">
<p>{{ social.value }}</p>
</div>
</v-card-text>
</v-card>
</template>
<script>
import { onMounted, ref } from "#vue/composition-api/dist/vue-composition-api";
export default {
setup() {
const testVariable = ref(0);
const socials = [
{
value: testVariable,
}
];
onMounted(() => {
setTimeout(() => testVariable.value = 100, 1000);
});
return {
socials,
}
},
}
</script>
<style scoped></style>

Answer 1

Your socials variable does not unref inner refs in template. Basically what you have to do in your template is using social.value.value. So I think renaming that variable would be better to something like
const socials = [
{
variable: testVariable,
}
];
So that you could do social.variable.value.
Details from Vue docs:
Note the unwrapping only applies to top-level properties - nested access to refs will not be unwrapped: Read More

Answer 2

Looks like your code works:
const { onMounted, ref } = Vue
const app = Vue.createApp({
setup() {
const testVariable = ref(0);
const socials = [{ value: testVariable, }];
onMounted(() => {
setTimeout(() => testVariable.value = 100, 1000);
});
return { socials, }
},
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(social, index) in socials" :key="index">
<p>{{ social.value }}</p>
</div>
</div>